在chrome中加载本地javascript文件进行测试?

问题描述 投票:38回答:11

我正在尝试使用Chrome浏览器在我的本地测试一些javascript,但Chrome不会加载本地资源。有一个简单的解决方法吗?

javascript browser
11个回答
21
投票

如果您只是想测试javascript文件的功能:创建一个空白的html文件,添加一个链接到您的js文件,就像通常从html加载一个js文件,并在Chrome中打开html文件。转到javascript控制台。您将能够像往常一样与js代码的功能进行交互。您不需要为此设置服务器。如果还不清楚,这是一个例子:

<html> <head> <script type = "text/javascript" src = "path/to/your/jsfile"></script></head> </html>

-1
投票

不知道为什么@ user3133050被拒绝,这就是你需要做的......

假设您尝试将moment.js加载到index.html中,这是您需要的结构,基于脚本标记的src:

/js/moment.js
/some-other-directory/index.html

../在“some-other-directory”文件夹级别查找“up”,找到它旁边的js文件夹,并在里面加载moment.js

这听起来像你的index.html在根级别,或嵌套甚至更深。

如果你仍在努力,在test.js所在的位置创建一个index.html文件,并添加一个<script src="test.js"></script>,看看是否加载。如果失败,请检查语法。在Chrome 46中测试过。


-1
投票

我发现最简单的方法是将文件内容复制到浏览器控制台并按Enter键。这种方法的缺点是您只能使用console.log语句进行调试。


-2
投票

看看你的html文件在哪里,你提供的路径是相对的而不是绝对的。你确定它放置正确吗?根据您在上面的示例中给出的路径:“src =”../ js / moment.js“”JS文件在层次结构中高一级。所以应该放置如下:

父文件夹子文件夹html文件js(这是一个文件夹)moment.js

双点表示当前目录中的父文件夹,在您的情况下,当前目录是html文件的位置。

但是为了让您的生活更轻松,使用服务器可以避免手动执行此操作的麻烦,因为服务器目录始终相同,因此更容易。


11
投票

您可以使用轻量级网络服务器来提供文件。 例如, 1.安装Node 2.安装“http-server”(或类似)包 3.从脚本文件所在的文件夹中运行http-server软件包(“http-server -c-1”) 4.从chrome控制台加载脚本(在chrome控制台上运行以下脚本

var ele = document.createElement("script");
var scriptPath = "http://localhost:8080/{scriptfilename}.js" //verify the script path
ele.setAttribute("src",scriptPath);
document.head.appendChild(ele)
  1. 该脚本现在已加载浏览器。您可以从控制台进行测试。

11
投票

要在仅使用本地计算机而不使用网络服务器时在Chrome中加载本地资源,您需要添加--allow-file-access-from-files标志。

您可以使用Chrome的快捷方式来访问,而不是。

在桌面上为Chrome创建快捷方式,右键单击快捷方式,选择属性。在打开的对话框中找到快捷方式的目标,并在chrome.exe离开空格后添加参数

例如C:\ PATH TO \ chrome.exe --allow-file-access-from-files

此快捷方式将允许访问文件,而不会影响您拥有的任何其他Chrome快捷方式。

当您使用此快捷方式打开Chrome时,它应该允许使用HTML5和文件系统API加载本地资源


3
投票

Windows 8.1添加:

--allow-文件访问从 - 文件

到引号后的目标文本框的末尾。

EX:“C:\ Program Files(x86)\ Google \ Chrome \ Application \ chrome.exe” - allow-file-access-from-files

奇迹般有效


2
投票

我发现最简单的解决方法是使用Firefox。它不仅没有额外的步骤(拖放 - 没有大惊小怪),但黑盒子比Chrome更好。


1
投票

使用Chrome浏览器和Web Server for Chrome扩展程序,设置默认文件夹并将链接的html / js文件放在那里,浏览到Chrome中的127.0.0.1:8887(0r无论端口设置为何处)并打开开发人员面板& 安慰。然后,您可以在控制台中与html / js脚本进行交互。


1
投票

你可以通过chrome的DevTools:Snippets的功能来实现

  1. 创建一个新的代码段
  2. 复制并粘贴您要执行的文件。
  3. 按CtrlEnter运行代码段

0
投票

如果您仍然需要这样做,我遇到了同样的问题。不知何故,EDGE渲染所有脚本,即使它们不是通过HTTP,HTTPS等...使用Edge直接从文件系统打开html / js文件,它将起作用。


0
投票

这是我在/ sandbox目录中创建2个文件所做的:

  • 第一个文件:sandbox.js
  • 第二个文件:index.html

const name = 'Karl'

console.log('This is the name: ' + name)
<html>
  <head>
    <script type = "text/javascript" src = "file:///Users/karl/Downloads/sandbox/sandbox.js"></script>
  </head>
</html>

然后,您可以使用Chrome或任何浏览器检查和调试/控制您的代码!

© www.soinside.com 2019 - 2024. All rights reserved.