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

我正在尝试使用 Chrome 浏览器在我的本地计算机上测试一些 JavaScript，但是 Chrome 不会加载本地资源。有什么简单的办法吗？

194379 次浏览
小开

你可以使用一个轻量级的网络服务器来服务文件。
比如说,
1. install 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. 该脚本现在已经加载到浏览器中。您可以从控制台对其进行测试。
小开

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

你可以有一个允许访问文件的 Chrome 快捷方式，也可以有一个不允许访问文件的快捷方式。

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

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

这个快捷方式将允许访问文件，而不会影响任何其他快捷方式到你的 Chrome 浏览器。

当你用这个快捷方式打开 Chrome 时，它应该允许使用 HTML5和文件系统 API 加载本地资源。

小开

Look at where your html file is, the path you provided is relative not absolute. Are you sure it's placed correctly. According to the path you gave in the example above: "src="../js/moment.js" " the JS file is one level higher in hierarchy. 因此，它应该放置如下:

父文件夹 子文件夹 Html 文件 Js (这是一个文件夹) 等一下 JS

双点表示来自工作目录的父文件夹，在你的例子中，工作目录就是 html 文件的位置。

但是为了让你的生活更容易使用服务器将安全您手动这样做的麻烦，因为服务器目录是相同的，所以它更容易。

小开

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

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

不知道为什么@user3133050被否决，这就是你需要做的..。

下面是您需要的结构，基于您的 script 标记的 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>，看看是否加载。如果失败，请检查语法。在 Chrome46中测试。

小开

Windows 8.1 add:

—— allow-file-access-from-files

到目标文本框的引号后面。

例如: “ C: Program Files (x86) Google Chrome Application Chrome.exe”—— allow-file-access-from-Files

非常有效

小开

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

小开

使用 Chrome 浏览器和 Web Server for Chrome 扩展，设置一个默认文件夹并将链接的 html/js 文件放入其中，浏览到 Chrome 中的127.0.0.1:8887(0r 不管端口设置在哪里)并打开开发者面板和控制台。然后您可以在控制台中与您的 html/js 脚本交互。

小开

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

小开

我发现最简单的解决方法是使用 Firefox。它不仅不需要额外的步骤(拖放-不必大惊小怪) ，而且黑箱操作比 Chrome 更好用。

小开

你可以通过 chrome 的 DevTools: Snipppet 的一个特性来实现

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

下面是我通过在 沙盒目录中创建2个文件所做的工作:

  • 第一个文件: Sandbox.js
  • 第二个文件: 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 或任何浏览器来检查和调试/控制你的代码！

小开

出于安全原因，现代浏览器不会从本地运行的 HTML 文件(地址栏中使用 file://协议的文件)加载资源。

要让现代浏览器加载并运行本地 HTML 文件中的 JavaScript 文件，最简单的方法是运行本地 Web 服务器。

如果你不想为了测试你的 JavaScript 而设置一个 Node 或者 Apache HTTP Server，那么我建议你安装 VisualStudio 代码和 现场服务器扩展。

VisualStudio 代码

VisualStudio 代码是几乎所有编程语言的源代码编辑器。它内置了对 JavaScript、 HTML、 CSS、 TypeScript 以及几乎所有用于 Web 开发的语言的支持。

安装 VisualStudio 代码

您可以从 https://code.visualstudio.com/获得平台的 VisualStudio 代码编辑器。它支持 Windows、 Linux 和 Mac。如果你喜欢 Surface Pro 的话，我觉得也可以。

添加动态代码扩展

在安装 VS Code 之后，您可以使用 Visual Studio Code 中的扩展面板(扩展面板中为 Ctrl + Shift + X)添加 激活代码代码扩展。

动态服务器扩展

添加了扩展之后，您应该会在 Visual Studio Code IDE 的右下角看到一个“ Go Live”按钮(如上面的屏幕截图所示)。

用密码打开

打开 VisualStudioCode 中存在 HTML 和 JavaScript 文件的根文件夹，然后单击“ Go Live”按钮。或者，您可以在资源管理器中右键单击 HTML 文件(Ctrl + Shift + E)并从出现的弹出菜单中选择 Open with Live Server。

使用 Live Server 打开

这应该创建一个本地运行的 Web 服务器，并在您的 Web 浏览器中打开文件或文件夹。如果文件路径正确，JavaScript 文件也应该正确加载和运行。

故障排除

如果由于某种原因，页面没有加载到您喜欢的浏览器中，请检查地址和端口号是否正确。如果 LiveServer 正在运行，它应该在 VisualStudioIDE 的右下角显示端口号。确保浏览器中的地址显示为 http://127.0.0.1:<PORT>/index.html，其中 <PORT>的编号与 VisualStudio 代码中的状态栏中显示的编号相同。

小开

运行一个简单的本地 HTTP 服务器

要测试这样的例子，需要一个本地的 webserver。最简单的方法之一是 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.
小开

设计

你会想要 从网络服务器上提供文件。其他的一切都将是离奇的变通方法，可能与最终结果大不相同。在网络上，文件是通过网络服务器提供的。你需要在本地模仿它。

既然你显然(至少是兼职)是一个网络开发人员，那就帮自己一个大忙，安装 node，如果你还没有安装的话。它与 npx二进制文件捆绑在一起，我们将使用它。请确保您有最近的 LTS 版本。使用 N可以得到额外的分数，这样可以很容易地与您的版本保持最新，甚至可以根据需要切换它们。

要采取的步骤

  • 文件所在的文件夹内: npx http-server -c-1
  • 您现在可以在 http://127.0.0.1:8000/filename访问该文件
  • 最后要做的是让浏览器加载文件。Magesh 的回答可以很好地解决这个问题，但是我建议将这个代码片段放到一个“自定义 js”扩展中。到目前为止，这个对我很有帮助。
  • 一切就绪后，只需重新加载页面将得到一个更新版本 你的本地档案。
小开

注意 : 当你搜索 “ chrome 读取没有服务器的本地 css”的时候，这个问题会出现在谷歌的顶部。

如果您真的希望为本地网页提供服务并加载其 CSS 和 JS，而且您确实没有或不想使用 http 服务器，那么不要加载脚本或样式; 将它们内联。

而不是这样的东西:

<link rel="stylesheet" href="somefile.css">

定义风格如下:

<style>/*Here goes all the CSS file content*/</style>

JavaScript 文件也是一样，HTML 文件会更大，但是它能工作。

基本上，您只需要复制文件内容并将其内联粘贴。

您确实应该使用服务器 ，但是如果您被迫这样做，您可以使用这种方法。

小开

对于我的用例，我需要启动一个本地服务器，创建一个交互式 html 页面，并打开它以便用户能够与其交互。问题是如何将本地服务器的 web 根目录设置为我的临时工作文件夹，在那里我创建了这些动态文件。这是一个快速而肮脏的解决方案。

在下面的代码中，LOCAL _ WEB _ DIRECTORY 实际上是根。然后我创建/复制我想要在浏览器中打开的文件到那个目录 +/模板

import webbrowser
from http.server import ThreadingHTTPServer, SimpleHTTPRequestHandler


httpd = ThreadingHTTPServer(('', 8001), lambda *_: SimpleHTTPRequestHandler(*_, directory=config.LOCAL_WEB_DIR))
server_thread = threading.Thread(target=httpd.serve_forever, daemon=True)
server_thread.start()
webbrowser.open('http://localhost:8001//templates/' + work_html)
while True: sleep(1)

提交答案