如何使用chrome dev-tools在多个站点中测试脚本？

Question

首先，我不太确定这就是这类问题的地方，如果不是，请告诉我，我会将其删除。

我正在开发一个可以稍微修改DOM的脚本，我想在真实网站中测试它以查看它是否正常运行并检测问题。

我想知道该脚本是如何模拟该页面的，以及是否可以使用chrome dev-tools。

起初我尝试将脚本添加到脚本但脚本不会执行。

我尝试在控制台上写这个但是没有工作：

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) };

有了这个，您需要执行以下步骤：

1. 打开源面板
2. 转到左侧面板中的“Snippets”资源标签（绿色箭头。）
3. 右键单击资源视图（蓝色）并选择“New Snippet”
4. 为该片段命名，在我的情况下，我使用“test”作为名称。只要确保你明白它是什么。
5. 使用脚本填写内容编辑器。
6. 保存内容后，右键单击资源列表中的脚本。然后选择“Run Snippet”
7. 检查控制台（红色轮廓，用于抽屉，或者您可以转到控制台面板）以查看输出。



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