Chrome Developer Tools - Dynamically Created Element

Question

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?

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

Answer 1

Updated answer:

Below you've said:

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. You can use Dev Tools to trigger a breakpoint when its parent element is modified:

   1. Load the page

   2. Open Dev Tools

   3. Go to the Elements panel

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

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

   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.

   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).

2. 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. Load the page

   2. Open Dev Tools

   3. Go to the Sources tab

   4. 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

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

   6. Press Enter, all matches will be shown below

   You can even use regular expressions.

---

Original answer:

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

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.

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("*") 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);
    }
});

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.