有没有办法找出哪个JS脚本在Chrome的开发人员工具中创建了动态元素？如果我在页面上“查看页面源”，则该元素不存在。我可以在Chrome的开发者工具中看到该元素。有没有办法找出具体的JavaScript文件和我的JavaScript文件中的哪一行创建元素？
为了帮助澄清：我知道创建了哪个元素...我不知道哪个.js文件创建了它，特别是.js文件中的哪一行
答案 0 :(得分：6)
更新回答：
下面你说过：
我知道它是哪个元素......我不知道是哪个.js文件创建它，特别是.js文件中的哪一行
这不是最初的问题。 ： - ）
如果您知道它是哪个元素，可以选择两个选项：
您可以使用Dev Tools在修改其父元素时触发断点：
加载页面
打开开发工具
转到“元素”面板
导航到目标元素最终将添加到
右键单击父元素，然后单击 Break on ...＆gt;子树修改
现在，Chrome会在修改父元素的子树时触发断点，因此您可以看到添加元素的JavaScript代码。
不幸的是，如果在主要加载页面期间添加元素，将不会触发该断点（例如，在解析HTML期间，通过立即运行而不是等待的脚本）
如果元素中有任何特定的文字（内容，id，class，某些属性，等等），一旦页面加载，您就可以使用Chrome强大的搜索功能功能，试图找到该文本：
加载页面
打开开发工具
转到“来源”标签
点击Ctrl + Shift + F，即“在文件中查找” - 它会查找与该页面关联的所有文件，而不仅仅是“当前”文件
键入您认为可能有助于您识别添加元素的代码的文本
按Enter键，所有匹配项将显示在下面
您甚至可以使用正则表达式。
原始回答：
不，没有简单的方法可以区分页面加载后通过JavaScript创建的元素与初始HTML解析创建的元素。
或者至少，在页面上的任何其他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的控制台非常酷 - 您可以右键单击控制台中的元素显示，然后选择“在元素中显示”面板确切地看到该元素的位置。
答案 1 :(得分：0)
您可以使用chrome-devtools-protocol的实验功能。 选中https://chromedevtools.github.io/devtools-protocol/tot/DOM/#method-getNodeStackTraces
首先，将“ DOM.setNodeStackTracesEnabled”发送给chrome dev协议。 其次，使用“ DOM.getNodeStackTraces”消息。 因此，您可以从动态创建元素中获取调用堆栈信息。
我使用这些功能编写了自己的程序。