如何仅使用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完成。 为了使它易于在许多地方使用，您应该利用一个名为“片段”的功能。

这是我在代码段中用来测试的代码。 我更改了“ 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. 右键单击资源视图（蓝色），然后选择“新建代码段”
4. 为代码段命名，在我的情况下，我使用“ test”作为名称。 只要确保您了解它是什么。
5. 用脚本填充内容编辑器。
6. 保存内容后，右键单击资源列表中的脚本。 然后选择“运行代码段”
7. 检查控制台（红色轮廓，用于抽屉，或者您可以进入控制台面板本身）查看输出。

要进一步验证它是否可以正常工作，可以检查“元素面板”。