CODEWITHSUNDEEP
javascripthtmldomgoogle-chrome-devtools
mr.incredible
mr.incredible

Reputation: 4185

How to track addition of HTML element?

I.e. there are many minified scripts and iframes on the page and I want to find exact part of a script which is responsible for HTML element appearance.

It is just <div style="height:120px;"></div> element in the body of a page and it appears dynamically after some time.

That's why I can't just set breakpoint on it in elements tab with Chrome Dev Tools.

If I set breakpoint after this element appears then this breakpoint will be lost after page reload.

How to define what script and what part of it creates this tiny DOM element on the page if it appears after some time and I can't set breakpoint on it before?

Upvotes: 0

Views: 274

Answers (3)

Kayce Basques
Kayce Basques

Reputation: 25907

Use a subtree modification DOM change breakpoint.

For example, if your page looks like this:

...
<body>
  <main>
    ...
    <div style="height:120px;"></div>
  </main>
</body>

You'll want to set the subtree modification breakpoint on <main>. Whenever a child node of <main> gets modified (such as your node that's getting added), DevTools pauses on the line of JS that caused the modification.

Upvotes: 0

Christian B
Christian B

Reputation: 102

If the element changes over time, it may have a linked event - to check that, you can open the chrome 'Developer Tools' and click 'Event Listeners' and then select the element to see what is bound to it. You can also click on 'Computed' and click the different elements to and see what has changed it.

Upvotes: 0

Korgrue
Korgrue

Reputation: 3478

Use the Performance tab in Chrome and run a short performance recording. Then zoom in and look for the point that the DOM element changed in the waterfall. Click that marker in the waterfall and it will tell you what method was called at the moment the DOM element changed. You should be able to track it back from there by searching for the function call in your scripts.

Upvotes: 1

Related Questions