我正在尝试在本地计算机上使用Chrome浏览器测试一些JavaScript，但是Chrome不会加载本地资源。是否有简单的解决方法？
我想测试一些 JavaScript 代码，但 Chrome 浏览器无法加载本地资源。是否有简单的解决方法？在Chrome中加载本地JavaScript文件进行测试？
78
- simple
6
使用Web服务器？你在说什么？ - SLaks
1简单测试网页。在浏览器中预览。例如：<script type="text/javascript" src="../js/moment.js"></script> - simple
4回答：使用本地主机上的 Web 服务器。 - SLaks
2如果HTML文件不在Web服务器上运行，而且永远也不会运行怎么办？在我的情况下，我需要一个本地运行的HTML页面，但仍然需要加载JSON文件。我无法调整Chrome设置，因为HTML文件应该可以在任何地方运行，而不仅仅是在我的机器上。 - Kokodoko
5如果你计划最终在Android的WebView中运行它（该WebView将运行本地资源），但需要在本地调试引导问题，那么@SLaks的回答并不是一个很好的答案。 - Michael
最简单的解决方案：将您的JS文件拖放到浏览器控制台中，然后看魔法发生。 - Davidson Lima
18个回答
31
如果您只是想测试JavaScript文件的功能：创建一个空白HTML文件，像通常从HTML加载JS文件一样添加到JS文件的链接，并在Chrome中打开HTML文件。转到JavaScript控制台。您将能够像往常一样与JS代码的功能进行交互。这不需要设置服务器。如果还不清楚，这里有一个例子：
<html>
<head>
<script type = "text/javascript" src = "path/to/your/jsfile"></script>
</head>
</html>
- picmate 涅
3
11当我执行
file:///Users/someuser/dev/file.js 时，这个有效。 - Clay2当我尝试这样做时，我会遇到很多奇怪的行为 - 我无法访问CSS样式对象，我的某些事件处理程序不起作用，我无法为AJaX请求提供凭据... - Michael
我同意@Michael的观点，这不是一个好的方法。 - Gass
24
您可以使用轻量级的 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)
- 该脚本现已在浏览器中加载。您可以从控制台进行测试。
- Magesh
4
12测试本地文件需要的麻烦有点多。而且，当文件需要在别处运行而不仅仅是在你自己的机器上运行时，这种方法就行不通了。 - Kokodoko
9这个问题是关于从本地加载和执行JavaScript文件吗？ - Magesh
虽然这对于原始问题来说是不必要的工作，但对于将外部托管脚本(在我的情况下为用于进行API请求的axios)添加到浏览器控制台以进行实验而言，这是一个非常好的解决方案。 - zgillis
1对我来说，运行服务器更简单了。如果已安装Python，请将PowerShell导航到包含.html文件的目录，运行
python3 -m http.server 8000，然后将Chrome导航到localhost:8000/my-file.html。无需修改脚本，尽管当Chrome提示已阻止本地主机：8000的JS时，我确实需要允许JS（在Chrome中默认禁用JS）。 - ggorlen20
为了在Chrome中加载本地资源并且不使用Web服务器，需要添加
--allow-file-access-from-files标记。您可以创建两个Chrome快捷方式，一个允许访问文件，另一个不允许。
在桌面上创建一个Chrome的快捷方式，右键单击它，选择属性。在打开的对话框中找到该快捷方式的目标，并在chrome.exe之后添加参数，并留有一个空格。
例如：C:\PATH TO\chrome.exe --allow-file-access-from-files
这个快捷方式将允许访问文件而不影响您拥有的其他Chrome快捷方式。
当您使用此快捷方式打开Chrome时，它应该可以使用HTML5和文件系统API来加载本地资源。- jing3142
4
6我刚试了一下，但没有效果。还需要设置其他内容吗？ - Carlos
1适用于Linux的命令：/usr/bin/chromium-browser --allow-file-access-from-files - Rian
4不在Win10的PowerShell或Cmd中：
C:\"Program Files (x86)"\Google\Chrome\Application\chrome.exe --allow-file-access-from-files。事实上，在Cmd中它会尝试以某种原因打开.exe作为页面... - Blair Houghton在Ubuntu上对我有效。但在重新启动Chrome之前，您必须完全终止所有Chrome进程。 - Dzenly
11
出于安全考虑，现代浏览器不会从本地运行的HTML文件（地址栏中使用file://协议的文件）加载资源。
让现代浏览器加载和运行本地HTML文件中的JavaScript文件的最简单方法是运行本地Web服务器。
如果您不想费力设置Node或Apache Web服务器来测试JavaScript，则建议您安装Visual Studio Code和Live Server扩展程序。
Visual Studio Code
Visual Studio Code是几乎适用于任何编程语言的源代码编辑器。它具有对JavaScript、HTML、CSS、TypeScript以及几乎所有用于Web开发的语言的内置支持。
安装Visual Studio Code
您可以从https://code.visualstudio.com/获取适用于您平台的Visual Studio Code编辑器。它支持Windows、Linux和Mac。我认为如果您需要，它也可以在Surface Pro上工作。
添加Live Code扩展
安装完VS Code后，您可以在Visual Studio Code的扩展面板（Windows中为Ctrl+Shift+X）中添加Live Code代码扩展。
添加扩展后，您应该在Visual Studio Code IDE的右下角看到一个“Go Live”按钮（如上图所示）。
在Code中打开
在Visual Studio Code中打开包含HTML和JavaScript文件的根文件夹，并单击“Go Live”按钮。或者，您可以在资源管理器（Ctrl+Shift+E）中右键单击HTML文件，然后从弹出菜单中选择使用Live Server打开。
这将创建一个本地运行的Web服务器，并在您的Web浏览器中打开文件或文件夹。如果您的文件路径正确，则JavaScript文件也应正确加载和运行。
故障排除
如果某些情况下，页面无法在您喜欢的浏览器中加载，请检查地址和端口号是否正确。如果Live Server正在运行，则应在Visual Studio IDE的右下角显示端口号。确保浏览器中的地址为http://127.0.0.1:<PORT>/index.html，其中<PORT>与Visual Studio Code状态栏中显示的数字相同。- Jeremiah van Oosten
6
使用Chrome浏览器和Web Server for Chrome扩展程序，设置一个默认文件夹并将链接的html/js文件放在其中，在Chrome中浏览到127.0.0.1:8887（或任何端口）并打开开发者面板和控制台。然后您可以在控制台中与您的html/js脚本进行交互。
- minimallinux
2
你可以在这里获取它：https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb?hl=en，无论你设置的默认文件夹是什么，都将成为你的Web服务器。如果你不想设置Apache或其他任何东西，这非常方便。 - minimallinux
1如果您使用VS Code编辑器（https://code.visualstudio.com/），则更简单的方法是安装Live Server扩展程序，然后您就不需要其他任何东西了。只需在VS Code中打开项目文件夹（可以是任何文件夹），右键单击资源管理器中的HTML文件（带有链接的js），选择“使用实时服务器打开”，然后浏览到localhost：5500，您就可以在浏览器中查看输出并使用Chrome / Firefox控制台。 - minimallinux
5
您可以通过Chrome DevTools的功能：片段（Snippets）来完成。
- 创建一个新的片段
- 复制并粘贴您想要执行的文件。
- 按下 CtrlEnter 运行该片段。
- Sophie Su
2
https://developer.chrome.com/docs/devtools/javascript/snippets/ - SteveWithamDuplicate
我很感激这个信息，但是当@Sophie Su说“复制并粘贴文件”时，我认为这意味着复制并粘贴一个js文件的所有内容。但我认为原始问题是关于让一个html文件运行多个js文件和命令，完全像从服务器获取一样，而不是逐个推送文件或命令。 - SteveWithamDuplicate
5
我找到的最简单的解决方法是使用Firefox浏览器。不仅不需要额外的步骤（拖放-轻松简便），而且黑盒测试比Chrome更好。
- Mitch
4
运行一个简单的本地HTTP服务器
为了测试这样的例子，需要一个本地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.
- Junaid
5
每个人都展示了这个，但没有人给出下一步的编程示例。那么你是否使用webrowser.open和文件路径打开文件？还是必须是一些http路径，如果是，那么相对于http.server的路径是什么？ - mike01010
你的使用情况是什么？你能说明你想要实现什么吗？ - Junaid
使用情况是通过编程方式构建和启动HTML。为此，我必须异步地启动simplehttpserver，然后打开HTML。这些解决方案中没有讨论如何设置simplehttpserver的web_root。经过多次尝试，我终于找到了如何做到这一点，以便它能够找到我复制到“工作目录”的文件。 - mike01010
很高兴你找到了解决方案。一定要和其他人分享哦。 - Junaid
好的，我增加了另一种解决方案 - 这个解决方案适用于那些想要在服务器启动后以编程方式打开文件的人。 - mike01010
3
Windows 8.1新增:
--allow-file-access-from-files
在引号后的目标文本框末尾添加上述文本。
例如: "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files
轻松解决问题。
- razor2816
2
设置
您需要从Web服务器上提供文件。其他方法可能与最终结果大不相同。在Web上，文件是通过Web服务器提供的。您需要在本地模拟这种情况。
既然您显然（至少兼职）是一名Web开发人员，请给自己带来极大的方便，并安装node，如果您还没有安装。它捆绑了npx二进制文件，我们将使用它。确保您有一个最新的LTS版本。使用n会获得额外的积分，它将使您轻松地保持版本更新，甚至根据需要切换版本。
步骤
- 在存储文件的文件夹内：
npx http-server -c-1 - 现在您可以通过http://127.0.0.1:8000/filename访问该文件
- 最后一件事是让浏览器加载文件。 Magesh's answer对此非常有效，但我建议将该代码片段放入“自定义JS”扩展中。 这个扩展目前为止一直为我服务得很好。
- 准备就绪后，只需重新加载页面即可获取本地文件的更新版本。
- panepeter
2
文件名必须在本地系统上放置在哪里？ - mike01010
@mike01010 基本上可以在任何地方执行。只需注意在文件夹中执行
npx 命令 (例如，您的 shell 应将该文件夹作为当前工作目录)。此外，为避免权限冲突，文件夹应归您所有。 - panepeter网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接