Chrome开发者工具-动态创建的元素 [英] Chrome Developer Tools - Dynamically Created Element

问题描述

是否有办法找出哪个JS脚本在Chrome的开发人员工具中创建了动态元素?如果我在页面上执行查看页面源代码"，则该元素不存在.我可以在Chrome的开发人员工具中看到该元素.有没有办法专门找出哪个JavaScript文件和我的JavaScript文件中的哪一行创建了元素?

Is there a way to find out which JS script created a dynamic element in Chrome's Developer Tools? If I do 'view page source' on the page, the element isn't there. I can see the element though in Chrome's Developer Tools. Is there a way to find out specifically which JavaScript file and what line in my JavaScript file created the element?

为了澄清一下:我知道创建了哪个元素...我不知道是哪个.js文件创建了该元素，尤其是那个.js文件中的哪一行

To help clarify: I know which element is created...what I don't know is which .js file created it and specifically what line in that .js file

推荐答案

更新后的答案:

在你下面说:

我知道它是哪个元素...我不知道是哪个.js文件创建了它，尤其是那个.js文件中的哪一行

I know which element it is...what I don't know is which .js file created it and specifically what line in that .js file

这不是问题的原始读法. :-)

That's not how the question originally read. :-)

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

If you know which element it is, two options for you:

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

1. You can use Dev Tools to trigger a breakpoint when its parent element is modified:

1. 加载页面

1. Load the page

打开开发工具

转到元素"面板

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

Navigate to the parent element that the target element will eventually be added to

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

Right-click the parent element and click Break on... > Subtree Modifications

现在，当修改父元素的子树时，Chrome将触发一个断点，因此您可以看到正在添加该元素的JavaScript代码.

Now, Chrome will trigger a breakpoint when the parent element's subtree is modified, and so you can see what JavaScript code is adding the element.

不幸的是，如果在页面的主要加载过程中(例如，在HTML的解析过程中，通过立即运行而不是等待运行的脚本来添加)元素，则不会触发该断点.

Unfortuantely, it won't fire that breakpoint if the element is added during the main loading of the page (e.g., during the parsing of the HTML, by script that runs immediately rather than waiting).

如果元素中似乎有特定于其的文本(内容，id，class，某些属性等)，则在加载页面后，您可以使用Chrome强大的搜索功能来尝试找到该文本:

If there's any text in the element that seems specific to it (content, id, class, some attribute, whatever), once the page is loaded you can use Chrome's powerful search feature to try to find that text:

1. 加载页面

1. Load the page

打开开发工具

转到来源"标签

单击Ctrl + Shift + F，即在文件中查找".它会查找与页面关联的所有文件，而不仅仅是当前"文件

Click Ctrl+Shift+F, which is "find in files" — it looks in all of the files associated with the page, not just the "current" file

键入您认为可以帮助您识别添加元素的代码的文本

Type the text that you think might help you identify the code adding the element

按Enter键，所有匹配项都将显示在下方

Press Enter, all matches will be shown below

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

You can even use regular expressions.

---

原始答案:

否，没有简单的方法来区分页面加载后通过JavaScript创建的元素与初始HTML解析创建的元素.

No, there's no simple way to differentiate an element created via JavaScript after page load from ones created by the initial HTML parsing.

或者至少，在运行该页面上的其他JavaScript之前，并非没有向运行该页面的JavaScript中添加，我想这是必需的.

Or at least, there isn't without adding JavaScript to the page that runs before any other JavaScript on the page runs, which I'm guessing is a requirement.

但是，如果您可以在运行任何其他JavaScript之前将JavaScript添加到页面，则实际上确实很容易做到:

But if you can add JavaScript to the page before any other JavaScript runs, it's actually really easy to do:

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

这会标记页面上的每个元素，并带有一个属性，该属性告诉您代码运行时该元素在那里.您可以在开发工具"的元素"面板中看到这些属性.因此，如果看到一个不具有该属性的元素，则说明该元素是在以后添加的.

That marks every single element on the page with an attribute that tells you it was there when that code ran. You can see those attributes in the Elements panel of the Dev Tools. And so, if you see an element that doesn't have that attribute, you know it was added later.

document.querySelectorAll("*")是您可能不希望在生产代码中使用的重要工具，但是对于调试/开发时的临时使用来说，这很好.

document.querySelectorAll("*") is a big hammer you probably wouldn't want to use in production code, but for temporary use when debugging/developing, it's fine.

如果您以后想知道其他代码创建的元素，则可以在控制台中进行:

And if you want to know about the elements that have been created by other code later, you can do this in the console:

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

这将输出您在运行较早代码时未在页面上显示的所有元素，并且Chrome的控制台确实很棒.您可以右键单击控制台中的元素显示，然后选择在元素中显示面板"以查看该元素的确切位置.

That'll output every element that wasn't on the page when you ran the earlier code, and Chrome's console is really cool — you can right-click the element display in the console and choose "Reveal in Elements panel" to see exactly where that element is.

这篇关于Chrome开发者工具-动态创建的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！