如何仅使用 chrome 开发工具在多个站点中测试脚本？

Question

首先我不太确定是否适合此类问题，如果不是请告诉我，我会删除它。

我正在开发一个稍微修改 DOM 的脚本，我想在真实站点中对其进行测试，以查看其行为是否正确并检测问题。

我想知道如何模拟脚本在那个页面上，以及是否可以使用 chrome 开发工具。

起初我尝试将脚本添加到，但脚本没有执行。

我试过在控制台上写这个但没有成功：

var script1 = document.createElement("script");
var script2 = document.createElement("script");
var head = document.querySelector("head");
var text = 'myscript();';
script2[(script2.innerText===undefined?"textContent":"innerText")] = text;

script1.setAttribute("src", "http://mysite.myscript.js");
head.appendChild(script1);
script1.onload = function(){ head.appendChild(script2) };

编辑：实际上该脚本有效，但在内部我正在收听 DOMcontentLoad 事件，所以当然当我从控制台执行该事件时，dom已加载。

Answer 1

这可以使用 DevTools 完成。为了使其在许多地方更容易做到，您应该利用一个名为 Snippets 的功能。

这是我在代码片段中用来测试的代码。我更改了 "mysite" URL 以提取 Material Design Lite 的 JS 副本并设置文本以记录 componentHandler 对象。除了这些更改之外，这是您的代码：

var script1 = document.createElement("script");
var script2 = document.createElement("script");
var head = document.querySelector("head");
var text = 'console.log(componentHandler);';
script2[(script2.innerText===undefined?"textContent":"innerText")] = text;

script1.setAttribute("src", "https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js");
head.appendChild(script1);
script1.onload = function(){ head.appendChild(script2) };

为此，您需要执行以下步骤：

打开源面板
转到左侧面板中的 "Snippets" 资源选项卡（绿色箭头。）
右键单击资源视图（蓝色）和 select "New Snippet"
为片段命名，在我的例子中，我使用 "test" 作为名称。只要确保您了解它是什么即可。
在内容编辑器中填写脚本。
保存内容后，右键单击资源列表中的脚本。然后select"Run Snippet"
检查控制台（红色轮廓，用于抽屉，或者您可以转到控制台面板本身）以查看输出。

要进一步验证这是否有效，您可以查看元素面板。

如何仅使用 chrome 开发工具在多个站点中测试脚本？

How to test a script in multiple sites just by using chrome dev-tools?

javascript

google-chrome

google-chrome-devtools