有没有办法在 Chrome 的开发者工具中找出哪个 JS 脚本创建了动态元素？如果我在页面上“查看页面源”，则该元素不存在。我可以在 Chrome 的开发者工具中看到该元素。有没有办法具体找出哪个 JavaScript 文件以及我的 JavaScript 文件中的哪一行创建了该元素？
为了帮助澄清：我知道创建了哪个元素...我不知道是哪个 .js 文件创建了它，特别是该 .js 文件中的哪一行
【问题讨论】：
标签： javascript html google-chrome-devtools
您可以使用 chrome-devtools-protocol 的实验性功能。 检查这个，https://chromedevtools.github.io/devtools-protocol/tot/DOM/#method-getNodeStackTraces
首先，将“DOM.setNodeStackTracesEnabled”发送到 chrome dev protocl。 其次，使用“DOM.getNodeStackTraces”消息。 因此，您可以从动态创建元素中获取调用堆栈信息。
我使用这些函数编写了自己的程序。
【讨论】：
更新答案：
下面你说过：
我知道它是哪个元素...我不知道是哪个 .js 文件创建了它，特别是那个 .js 文件中的哪一行
这不是问题最初的阅读方式。 :-)
如果你知道它是哪个元素，有两种选择：
您可以使用开发工具在其父元素被修改时触发断点：
加载页面
打开开发工具
转到“元素”面板
导航到最终将添加目标元素的父元素
右键单击父元素，然后单击Break on... > Subtree Modifications
现在，Chrome 会在修改父元素的子树时触发断点，因此您可以看到添加该元素的 JavaScript 代码。
不幸的是，如果在页面的主要加载过程中添加了元素（例如，在 HTML 的解析过程中，通过立即运行而不是等待的脚本），它不会触发该断点.
如果元素中有任何似乎特定于它的文本（内容、id、class、某些属性等），一旦页面加载，您可以使用 Chrome 的强大搜索功能尝试查找该文本：
加载页面
打开开发工具
转到“来源”选项卡
单击 Ctrl+Shift+F，即“在文件中查找”——它会查找与页面关联的所有文件，而不仅仅是“当前”文件
键入您认为可能有助于识别添加元素的代码的文本
按回车键，所有匹配项将显示在下方
您甚至可以使用正则表达式。
原答案：
不，没有简单的方法可以区分页面加载后通过 JavaScript 创建的元素与初始 HTML 解析创建的元素。
或者至少，在页面上运行之前任何其他 JavaScript 运行之前，必须将 JavaScript 添加到运行的页面中，我猜这是一个要求。
但如果您可以在任何其他 JavaScript 运行之前将 JavaScript 添加到页面中，这实际上很容易做到：
Array.prototype.forEach.call(document.querySelectorAll("*"), function(element) {
element.setAttribute("data-original", "");
});
这会用一个属性标记页面上的每个元素，告诉您该代码运行时它就在那里。您可以在 Dev Tools 的 Elements 面板中看到这些属性。因此，如果您看到一个没有该属性的元素，您就知道它是后来添加的。
document.querySelectorAll("*") 是一把大锤子，你可能不想在生产代码中使用，但在调试/开发时临时使用，没关系。
如果你以后想知道其他代码创建的元素，你可以在控制台中这样做：
Array.prototype.forEach.call(document.querySelectorAll("*"), function(element) {
if (element.getAttribute("data-original") === null) {
console.log(element);
}
});
这会输出你运行早期代码时页面上没有的所有元素，Chrome 的控制台真的很酷——你可以右键单击控制台中的元素显示并选择“在元素面板中显示”来查看该元素的确切位置。
【讨论】：