Chrome开发者工具 - 动态创建的元素

Question

有没有办法在Chrome的开发者工具中找出哪个JS脚本创建了动态元素？如果我在页面上执行“查看页面源代码”，该元素并不在那里。但是，在Chrome的开发者工具中，我可以看到该元素。有没有办法找出具体是哪个JavaScript文件以及该JavaScript文件中的哪一行创建了该元素？

为了澄清问题：我知道哪个元素被创建了...我不知道的是哪个.js文件创建了它，特别是在该.js文件中的哪一行。

- Tom

---

检查JS创建的元素是否应用了class或id。也许这样你可以搜索特定元素的JS文件。 - pbaldauf

在开发者工具的元素选项卡中，右键点击父级元素并选择“断点 -> 子树修改”。 - Malk

创建一个断点，并查看“源”选项卡上的“调用堆栈”部分，如果不清楚哪个文件正在进行修改。 - Brett Caswell

Answer 1

更新后的答案:

在你之前说：

我知道是哪个元素...但我不知道是哪个.js文件创建了它，以及具体是哪行在那个.js文件中

这不是原始问题的内容。 :-)

如果你知道是哪个元素，有两个选项：

1. 您可以使用开发工具在其父元素修改时触发断点：

   1. 加载页面

   2. 打开开发工具

   3. 转到“元素”面板

   4. 导航到目标元素最终将添加到其中的父元素

   5. 右键单击父元素，然后单击断点 > 子树修改

   现在，Chrome 将在父元素的子树被修改时触发断点，因此您可以看到添加元素的 JavaScript 代码。

   不幸的是，如果元素在页面的主要加载期间（例如，在 HTML 解析期间通过立即运行的脚本添加）添加，则不会触发该断点。

2. 如果元素中有任何特定于它的文本（内容、id、class、某个属性等），则在页面加载后，您可以使用 Chrome 强大的搜索功能尝试查找该文本：

   1. 加载页面

   2. 打开开发工具

   3. 转到“源”选项卡

   4. 点击 Ctrl+Shift+F，这是“在文件中查找”，它会查找与页面相关联的所有文件，而不仅仅是“当前”文件

   5. 键入您认为可能有助于识别添加元素代码的文本

   6. 按 Enter，所有匹配项都会显示在下面

   您甚至可以使用正则表达式。

---

原始答案:

没有简单的方法可以区分通过 JavaScript 在页面加载后创建的元素与通过初始 HTML 解析创建的元素。

或者至少，在运行页面上的任何其他 JavaScript 之前添加运行的 JavaScript 不存在时，就没有。

但是，如果你可以在页面上添加 JavaScript，使其在运行页面上的任何其他 JavaScript 之前运行，那么实际上很容易做到：

Array.prototype.forEach.call(document.querySelectorAll("*"), function(element) {
    element.setAttribute("data-original", "");
});

该代码会为页面上的每个元素添加一个属性，告诉您当代码运行时它在那里。您可以在开发工具的元素面板中看到这些属性。因此，如果您看到一个没有该属性的元素，您就知道它是后来添加的。

document.querySelectorAll("*")是一个大锤子，您可能不想在生产代码中使用，但在调试/开发时暂时使用是可以的。

如果您想了解其他代码创建的元素，可以在控制台中执行以下操作：

Array.prototype.forEach.call(document.querySelectorAll("*"), function(element) {
    if (element.getAttribute("data-original") === null) {
        console.log(element);
    }
});

这将输出之前代码运行时不在页面上的每个元素，Chrome 的控制台非常酷炫——您可以右键点击控制台中的元素显示，并选择“在元素面板中显示”以精确定位该元素所在位置。

- T.J. Crowder

---

我知道这是哪个元素...我不知道的是它是哪个.js文件创建的，以及在该.js文件中具体的代码行。 - Tom

@Adam：啊，那不是问题最初的提问方式。我已经更新了答案，希望能有所帮助。 - T.J. Crowder

@T.J.Crowder 谢谢。我选择选项1。当我按照那些指示操作时，它指向jquery，但我知道内容是在scripts.js文件中添加的。（我在资源选项卡中看到了scripts.js，但随着我不断推进函数调用，它仍然显示jquery）我可以使用选项2，只是比我想要的少一点具体性。 - Tom

@Adam：当你触发断点（选项1）时，如果转到源代码选项卡，在右侧找到“调用堆栈”。这样可以让你找到调用jQuery添加元素的函数（它可能轻松地在堆栈中下降三到四行）。 - T.J. Crowder

Answer 2

您可以使用chrome-devtools-protocol的实验性功能。 请查看https://chromedevtools.github.io/devtools-protocol/tot/DOM/#method-getNodeStackTraces

首先，向chrome dev protocl发送'DOM.setNodeStackTracesEnabled'。 其次，使用'DOM.getNodeStackTraces'消息。 这样，您就可以从动态创建元素中获取调用堆栈信息。

我使用这些函数编写了自己的程序。

图片：https://imgur.com/a/TtL5PtQ

这是我的项目：https://github.com/rollrat/custom-crawler

- rollrat

---

你能从开发控制台做到这个吗？我没想出如何做。 - Michael Terry