在 chrome 开发人员工具中从工作区运行 javascript 文件答案

【问题标题】：Run javascript file from the workspace in chrome developer tools在 chrome 开发人员工具中从工作区运行 javascript 文件
【发布时间】：2015-01-15 08:45:41
【问题描述】：

是否可以在 chrome 开发人员工具控制台的本地工作区中运行新创建的 JavaScript 文件？

我正在尝试实现的工作流程是这张图片中显示的工作流程：

我希望能够在我的工作区中创建一个新文件，运行（或要求或其他）该文件，并能够在 chrome 开发者控制台中使用它的函数和变量。

如果我是正确的，这意味着在网页上下文中运行脚本并将方法和变量添加到窗口对象？

他们有办法做到这一点吗？

【问题讨论】：

不是一个真正的答案，因为您想在浏览器中测试它，但是能够简单地测试 javascript 代码的另一种方法是实际上使用 Node.js，这样您就可以在外部运行它浏览器，也许可以通过单元测试轻松地对其进行测试。
不是一个真正的选择，因为我想使用开发人员工具作为我的编辑器 :)
在控制台执行文件内容即可。
这并不能解决我的问题。我想创建一个工作流，您可以在其中要求/加载文件，而不必在控制台中复制和粘贴整个代码。

标签： javascript google-chrome google-chrome-devtools

【解决方案1】：

我找不到将本地文件添加到 DOM 上下文的自动方法。迄今为止我发现的最佳解决方案：

打开本地工作区和正确的文件
按 CTRL + a（全选）
按 CTRL + SHIFT + e（替代方法：用鼠标右键单击所选文本，然后单击“在控制台中评估”）

嗯，这并不比复制和粘贴好多少，但省去了几次按键/鼠标点击。

【讨论】：

未来提醒：浏览器供应商正在实施 ecma2015 模块加载器，也许像 import test from 'file://...' 这样的东西会在几个月内工作，请参阅此处了解更多信息：developer.mozilla.org/de/docs/Web/JavaScript/Reference/…

【解决方案2】：

您可以使用脚本标记中的 javascript 文件创建一个像这样的纯 html 文件。

那么你应该可以在开发者控制台中获取你所有的方法了。

【讨论】：

这个可以，但是不能动态添加新的js文件
你为什么要这样做？
能够在控制台中创建文件并立即使用。
我在 2021 年 1 月尝试过这个并为我工作。我想试试这个以利用 chrome 中的断点

【解决方案3】：

您可以在您的页面中定义一个方法来动态地将javascript添加到页面中，然后从控制台调用它。

例如，如果您有这样的方法：

function loadJs(filename) {
	var tag=document.createElement('script');
	tag.setAttribute("type","text/javascript");
	tag.setAttribute("src", filename);
	document.getElementsByTagName("head")[0].appendChild(tag);
}

然后您可以从控制台使用该方法来加载您的 javascript 文件。

【讨论】：

这段代码给了我以下错误：load('C:\Users\u0098668\Documents\Projects/local-folder/test.js') 不允许加载本地资源：file:// /C:/Users%C2%98668DocumentsProjects/local-folder/test.js。是否可以检查工作区中的当前文件夹的文件名？
也许可以尝试使用“file:///C:/Users/u0098668/Documents/Projects/local-folder/test.js”作为你的js文件的路径。
或者尝试将文件放在与您的网页相同的位置，这样您就可以使用文件的相对路径，而不是在路径中使用 C:
给了我同样的错误。工作区是否有 URL？也许在我请求获取文件的本地主机上？
它确实将文件添加到我的 HTML 思想中，我只是不允许使用该资源？