如何在Chrome开发者工具控制台中的本地工作区内运行新建的JavaScript文件？
我想要实现的工作流程如图所示：
我希望能够在我的工作区创建一个新文件，运行（或需要或其他操作）该文件，并在Chrome开发者控制台中使用它的函数和变量。
如果我没理解错，这意味着在网页上下文中运行脚本，并将方法和变量添加到窗口对象中，对吗？
这个可行吗？
在Chrome开发者工具中从工作区运行JavaScript文件
22
- arnoutaertgeerts
4
这并不是一个真正的答案，因为你想在浏览器中测试它，但另一种简单测试JavaScript代码的替代方法是使用Node.js，这样你就可以在浏览器之外运行它，并通过单元测试轻松地测试它。 - Gimby
1不是真正的选择，因为我想使用开发者工具作为我的编辑器 :) - arnoutaertgeerts
1只需在控制台中执行文件内容即可。 - Konrad Dzwinel
3那并不能解决我的问题。我想创建一个工作流，使您能够要求/加载文件，而不必将整个代码复制并粘贴到控制台中。 - arnoutaertgeerts
4个回答
9
我找不到一种自动将本地文件添加到DOM上下文的方法。目前我发现的最好的解决方案是：
- 打开你的本地工作空间和正确的文件
- 按下CTRL + a（全选）
- 按下CTRL + SHIFT + e（另一种方法：鼠标右键单击所选文本，然后单击“在控制台中评估”）
- Trendfischer
1
2未来提醒：浏览器供应商正在实现ecma2015模块加载器，也许几个月后类似于
import test from 'file://...'的东西将会起作用，请参见此处以获取更多信息：https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Statements/import - Trendfischer1
您可以使用 script 标签将 JavaScript 文件嵌入到纯 HTML 文件中，如下所示。
- Raj Kumar
4
这个可以工作，但是它无法动态添加新的js文件。 - arnoutaertgeerts
1你为什么想要这样做？ - Raj Kumar
能够在控制台中创建文件并立即使用它们。 - arnoutaertgeerts
1我在2021年1月尝试过这个方法，对我有效。我想尝试一下利用Chrome中的断点。 - Caqu
0
作为一个例子：
步骤1：我们创建一个名为“TestJS_folder”的文件夹，其中包含两个文件。
- 第一个文件是index.html
- 第二个文件是test.js文件。
html文件的内容可以是：
<html>
<head>
<title>Test JS in Chrome</title>
</head>
<body>
<script src="test.js"></script>
</body>
</html>
步骤2：现在您可以在VSCode或任何编辑器中导入/打开此test.js文件。您可以从IDE编写js文件，然后单击index.html，它将在浏览器中打开html文件，您可以转到检查->控制台以根据您的用例检查日志。
- Ravi Yadav
0
您可以在页面中定义一个方法，动态地向页面添加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文件。
- Michael Dowd
8
这段代码给我以下错误：load('C:\Users\u0098668\Documents\Projects/local-folder/test.js') Not allowed to load local resource: file:///C:/Users%C2%98668DocumentsProjects/local-folder/test.js。是否可能检查工作区中的当前文件夹以获取文件名？ - arnoutaertgeerts
1也许你可以尝试使用"file:///C:/Users/u0098668/Documents/Projects/local-folder/test.js"作为你的JS文件路径。 - Michael Dowd
1或者尝试将文件放置在与您的网页相同的位置，这样您就可以使用相对路径来访问该文件，而不是在路径中包含C:。 - Michael Dowd
1给我相同的错误。工作区有URL吗？也许在本地主机上，我请求获取文件？ - arnoutaertgeerts
从您的初始截图来看，似乎您可以使用相对路径“/local-folder/test.js”。 - Michael Dowd
显示剩余3条评论
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接