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

Question

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

帮助澄清：我知道创建了哪个元素……我不知道是哪个 .js 文件创建了它，特别是该 .js 文件中的哪一行

Answer 1

更新的答案：

你在下面说过：

我知道它是哪个元素...我不知道是哪个 .js 文件创建了它，特别是该 .js 文件中的哪一行

这不是问题最初的阅读方式。 :-)

如果您知道它是哪个元素，则有两种选择：

1. 您可以使用 Dev Tools 在其父元素被修改时触发断点：

   1. 加载页面

   2. 打开开发工具

   3. 转到元素面板

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

   5. 右键单击父元素并单击Break on... > Subtree Modifications

   现在，当父元素的子树被修改时，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 的控制台非常酷——您可以右键单击控制台中的元素显示并选择“在元素面板中显示”以查看确切位置那个元素是。

Answer 2

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

首先，将“DOM.setNodeStackTracesEnabled”发送到 chrome dev protocl。 其次，使用“DOM.getNodeStackTraces”消息。 因此，您可以从动态创建元素中获取调用堆栈信息。

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

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

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