从 Chrome 开发者工具的工作区运行 javascript 文件

Question

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

我想要实现的工作流程如下图所示：

enter image description here

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

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

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

Answer 1

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

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

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

Answer 2

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

enter image description here

然后您应该能够在开发者控制台中获取所有方法。

Answer 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 文件。

Answer 4

举个例子：第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 文件，您可以转到 Inspect-> console 根据您的用例检查日志。

Answer 5

从工作区运行文件的一个有用替代方法可能是运行代码片段：

来源 => >> => 片段 + 新片段

https://developer.chrome.com/docs/devtools/javascript/snippets/

https://youtu.be/zW9ibQbYJNE?feature=shared

从 Chrome 开发者工具的工作区运行 javascript 文件

问题描述投票：0回答：5

5个回答

最新问题

从 Chrome 开发者工具的工作区运行 javascript 文件

问题描述 投票：0回答：5

5个回答

最新问题

问题描述投票：0回答：5