我正在尝试在本地计算机上使用Chrome浏览器测试一些JavaScript,但是Chrome不会加载本地资源。是否有简单的解决方法?
我想测试一些 JavaScript 代码,但 Chrome 浏览器无法加载本地资源。是否有简单的解决方法?我正在尝试在本地计算机上使用Chrome浏览器测试一些JavaScript,但是Chrome不会加载本地资源。是否有简单的解决方法?
我想测试一些 JavaScript 代码,但 Chrome 浏览器无法加载本地资源。是否有简单的解决方法?如果您只是想测试JavaScript文件的功能:创建一个空白HTML文件,像通常从HTML加载JS文件一样添加到JS文件的链接,并在Chrome中打开HTML文件。转到JavaScript控制台。您将能够像往常一样与JS代码的功能进行交互。这不需要设置服务器。如果还不清楚,这里有一个例子:
<html>
<head>
<script type = "text/javascript" src = "path/to/your/jsfile"></script>
</head>
</html>
file:///Users/someuser/dev/file.js
时,这个有效。 - Clay您可以使用轻量级的 Web 服务器来提供文件。
例如:
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)
python3 -m http.server 8000
,然后将Chrome导航到localhost:8000/my-file.html
。无需修改脚本,尽管当Chrome提示已阻止本地主机:8000的JS时,我确实需要允许JS(在Chrome中默认禁用JS)。 - ggorlen--allow-file-access-from-files
标记。您可以创建两个Chrome快捷方式,一个允许访问文件,另一个不允许。
在桌面上创建一个Chrome的快捷方式,右键单击它,选择属性。在打开的对话框中找到该快捷方式的目标,并在chrome.exe之后添加参数,并留有一个空格。
例如:C:\PATH TO\chrome.exe --allow-file-access-from-files
这个快捷方式将允许访问文件而不影响您拥有的其他Chrome快捷方式。
当您使用此快捷方式打开Chrome时,它应该可以使用HTML5和文件系统API来加载本地资源。C:\"Program Files (x86)"\Google\Chrome\Application\chrome.exe --allow-file-access-from-files
。事实上,在Cmd中它会尝试以某种原因打开.exe作为页面... - Blair Houghton出于安全考虑,现代浏览器不会从本地运行的HTML文件(地址栏中使用file://
协议的文件)加载资源。
让现代浏览器加载和运行本地HTML文件中的JavaScript文件的最简单方法是运行本地Web服务器。
如果您不想费力设置Node或Apache Web服务器来测试JavaScript,则建议您安装Visual Studio Code和Live Server扩展程序。
Visual Studio Code是几乎适用于任何编程语言的源代码编辑器。它具有对JavaScript、HTML、CSS、TypeScript以及几乎所有用于Web开发的语言的内置支持。
您可以从https://code.visualstudio.com/获取适用于您平台的Visual Studio Code编辑器。它支持Windows、Linux和Mac。我认为如果您需要,它也可以在Surface Pro上工作。
安装完VS Code后,您可以在Visual Studio Code的扩展面板(Windows中为Ctrl+Shift+X)中添加Live Code代码扩展。
添加扩展后,您应该在Visual Studio Code IDE的右下角看到一个“Go Live”按钮(如上图所示)。
在Visual Studio Code中打开包含HTML和JavaScript文件的根文件夹,并单击“Go Live”按钮。或者,您可以在资源管理器(Ctrl+Shift+E)中右键单击HTML文件,然后从弹出菜单中选择使用Live Server打开
。
这将创建一个本地运行的Web服务器,并在您的Web浏览器中打开文件或文件夹。如果您的文件路径正确,则JavaScript文件也应正确加载和运行。
http://127.0.0.1:<PORT>/index.html
,其中<PORT>
与Visual Studio Code状态栏中显示的数字相同。您可以通过Chrome DevTools的功能:片段(Snippets)来完成。
为了测试这样的例子,需要一个本地web服务器。其中一种最简单的方法是使用Python的SimpleHTTPServer
(或http.server
,具体取决于安装的Python版本)。
# 1. Install Python 3 & use:
python3 -m http.server
# On windows, instead of "python3" try "python" or "py -3"
# If you installed python version 2 then use:
python -m SimpleHTTPServer
# 2. To serve a specific folder use the --directory flag:
python3 -m http.server --directory /Users/junaid/WebstormProjects
# Note: I use MacOs & I have given the absolute path to my projects folder & I was able to serve my desired folder.
Windows 8.1新增:
--allow-file-access-from-files
在引号后的目标文本框末尾添加上述文本。
例如: "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files
轻松解决问题。
您需要从Web服务器上提供文件。其他方法可能与最终结果大不相同。在Web上,文件是通过Web服务器提供的。您需要在本地模拟这种情况。
既然您显然(至少兼职)是一名Web开发人员,请给自己带来极大的方便,并安装node
,如果您还没有安装。它捆绑了npx
二进制文件,我们将使用它。确保您有一个最新的LTS版本。使用n会获得额外的积分,它将使您轻松地保持版本更新,甚至根据需要切换版本。
npx http-server -c-1
npx
命令 (例如,您的 shell 应将该文件夹作为当前工作目录)。此外,为避免权限冲突,文件夹应归您所有。 - panepeter