javascript - 如何仅使用 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

这可以使用开发工具来完成。为了使在许多地方都能轻松完成，您应该利用称为“代码片段”的功能。

这是我在代码片段中用来测试的代码。我更改了“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) };

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

1. 打开源面板
2. 转到左侧面板中的“代码片段”资源选项卡(绿色箭头。)
3. 右键单击资源 View (蓝色)并选择“新建代码段”
4. 为代码片段命名，在我的例子中，我使用“test”作为名称。只要确保您了解它是什么即可。
5. 在内容编辑器中填写脚本。
6. 保存内容后，右键单击资源列表中的脚本。然后选择“运行代码片段”
7. 检查控制台(红色轮廓，用于抽屉，或者您可以转到控制台面板本身)以查看输出。

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