我正在尝试使用 Chrome 浏览器在本地计算机上测试一些 JavaScript，但 Chrome 不会加载本地资源。有没有简单的解决方法？
【问题讨论】：
标签： javascript browser
如果您只想测试 JavaScript 文件的功能：创建一个空白 HTML 文件，添加一个指向 JS 文件的链接，就像您通常从 HTML 加载 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时有效
要测试这些示例，需要一个本地网络服务器。 Python 的SimpleHTTPServer（或http.server，取决于安装的 Python 版本）提供了最简单的方法之一。
# Install Python & try one of the following depending on your python version. if the version is 3.X
python3 -m http.server
# On windows try "python" instead of "python3", or "py -3"
# If Python version is 2.X
python -m SimpleHTTPServer
【讨论】：
要在仅使用本地计算机而不使用网络服务器时在 Chrome 中加载本地资源，您需要添加 --allow-file-access-from-files 标志。
您可以有一个允许访问文件的 Chrome 快捷方式，一个不允许访问的快捷方式。
在桌面创建Chrome的快捷方式，右键快捷方式，选择属性。在打开的对话框中找到快捷方式的目标，并在 chrome.exe 后添加参数，留一个空格
例如C:\PATH TO\chrome.exe --allow-file-access-from-files
此快捷方式将允许访问文件，而不会影响您拥有的任何其他 Chrome 快捷方式。
当您使用此快捷方式打开 Chrome 时，它应该允许使用 HTML5 和文件系统 API 加载本地资源。
【讨论】：
出于安全原因，现代浏览器不会从本地运行的 HTML 文件（地址栏中使用file:// 协议的文件）加载资源。
让现代浏览器在本地 HTML 文件中加载和运行 JavaScript 文件的最简单方法是运行本地 Web 服务器。
如果您不想麻烦设置 Node 或 Apache Web 服务器来测试您的 JavaScript，那么我建议您安装 Visual Studio Code 和 Live Server 扩展。
Visual Studio 代码是一个源代码编辑器，适用于几乎所有的编程语言。它内置了对 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 的右下角看到一个“上线”按钮（如上图所示）。
在 Visual Studio Code 中打开 HTML 和 JavaScript 文件所在的根文件夹，然后单击“上线”按钮。或者，您可以在资源管理器中右键单击 HTML 文件 (Ctrl+Shift+E)，然后从出现的弹出菜单中选择 Open with Live Server。
这应该会创建一个本地运行的 Web 服务器并在您的 Web 浏览器中打开文件或文件夹。如果您的文件路径正确，您的 JavaScript 文件也应该正确加载和运行。
如果由于某种原因，页面无法在您喜欢的浏览器中加载，请检查地址和端口号是否正确。如果 Live Server 正在运行，它应该在 Visual Studio IDE 的右下角显示端口号。确保浏览器中的地址显示为 http://127.0.0.1:<PORT>/index.html，其中 <PORT> 与 Visual Studio Code 中状态栏中显示的数字相同。
【讨论】：
这是我在 /sandbox 目录中创建 2 个文件的方法：
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 或任何浏览器来检查和调试/控制台您的代码！
【讨论】：
你可以通过 chrome 的 DevTools 的一个功能来做到这一点：Snippets
【讨论】：
我发现的最简单的解决方法是使用 Firefox。它不仅无需额外步骤即可工作（拖放 - 无需大惊小怪），而且黑盒比 Chrome 更有效。
【讨论】：
如果您仍然需要这样做，我遇到了同样的问题。 不知何故，EDGE 会呈现所有脚本，即使它们不是通过 HTTP、HTTPS 等... 直接用Edge从文件系统打开html/js文件，就可以了。
【讨论】：
使用 Chrome 浏览器和用于 Chrome 扩展的 Web 服务器，设置一个默认文件夹并将链接的 html/js 文件放在那里，在 Chrome 中浏览到 127.0.0.1:8887（无论端口设置为 0r）并打开开发人员面板和控制台。然后，您可以在控制台中与您的 html/js 脚本进行交互。
【讨论】：
我发现最简单的方法是将文件内容复制到浏览器控制台并按 Enter。这种方法的缺点是只能使用 console.log 语句进行调试。
【讨论】：
Windows 8.1 添加：
--allow-file-access-from-files
到引号后的目标文本框的末尾。
EX: "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files
像魅力一样工作
【讨论】：
不知道为什么@user3133050 被否决，这就是你需要做的一切......
这是您需要的结构，基于您的脚本标签的 src，假设您尝试将 moment.js 加载到 index.html：
/js/moment.js
/some-other-directory/index.html
../ 在“some-other-directory”文件夹级别“向上”查找，找到它旁边的 js 文件夹，然后将 moment.js 加载到里面。
听起来您的index.html 处于根级别，或者嵌套更深。
如果您仍在苦苦挣扎，请创建一个test.js 文件在与index.html 相同的位置，然后添加一个<script src="test.js"></script> 并查看它是否加载。如果失败，请检查您的语法。在 Chrome 46 中测试。
【讨论】：
看看你的html文件在哪里，你提供的路径是相对的而不是绝对的。你确定它放置正确吗？根据您在上面示例中提供的路径：“src="../js/moment.js" " JS 文件在层次结构中高一级。 所以应该如下放置：
父文件夹 子文件夹 .html 文件 js（这是一个文件夹） 时刻.js
双点表示当前目录的父文件夹，在您的情况下，当前目录是html文件的位置。
但是为了让您的生活更轻松，使用服务器可以避免手动执行此操作的麻烦，因为服务器目录始终相同，因此更容易。
【讨论】：
您可以使用轻量级网络服务器来提供文件。
例如，
1.安装节点
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 提示它已阻止它时，我确实需要允许 JS 用于 localhost:8000（我在 Chrome 中默认禁用 JS）。