Chrome developer tools - dynamically generated element

Updated answer :

Below you said:

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

This is not how the question was originally asked. :-)

If you know which element it has, two options are for you:

• You can use Dev Tools to trigger a breakpoint when the parent changes:

  • Load the page

  • Open Dev Tools

  • Go to the Elements panel

  • Navigate to the parent where the target will eventually be added in

  • Right click on the parent and click Break ...> Subtitle Modifications

  Chrome will now call a breakpoint when the parent's subtree changes, so you can see what JavaScript is adding the element.

  Unfortunately, this breakpoint will not be triggered if an element is added during main page load (for example, during HTML parsing, to a script that runs immediately, rather than waiting).

• If there is some text in the element, which he defined (content id
  
  , class
  
  , any attribute that you want), after the page loads, you can use the Chrome powerful search to try to find this text:

  • Load the page

  • Open Dev Tools

  • Go to the Sources tab

  • Press Ctrl + Shift + F, which means "find in files" - it looks at all files associated with the page, not just the "current" file

  • Enter text that you think can help you identify the code adding the element

  • Press Enter, all matches will be shown below

  You can even use regular expressions.

Original answer :

No, there is no easy way to differentiate an element created with JavaScript after the page has loaded from those created by the initial parsing of the HTML.

Or at least there is no need to add JavaScript to the page from before if any other JavaScript on the page runs, which I assume is a requirement.

But if you can add JavaScript to the page before running other JavaScript, it's really very easy to do:

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

      

        
        
        
      

    

This marks every single element of the page with an attribute that tells you that it was there when this code worked. These attributes can be seen in the Elements panel of the Dev tools. So, if you see an element that doesn't have this attribute, you know that it was added later.

document.querySelectorAll("*")

- a big hammer that you probably don't want to use in production code, but for temporary use in debugging / development, that's okay.

And if you want to know about elements that were 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);
    }
});

      

        
        
        
      

    

This will output every element that was not on the page when you ran the previous code, and the Chrome console is really cool - you can right click on the items screen in the console and select the Show in Items pane to see exactly where this item.