What are the tools to understand which JS function performs a certain action on the DOM?

Question

JavaScript

Tell me, are there any tools to understand what changes the DOM structure?
For example, a new element appears in the DOM, how to understand what added it?

Please do not offer to study the page code, because this is not the method I'm looking for.

Maybe you can somehow "fix" the state and content of the parent home element, and track the mechanism that changed something in it?
For example, if we look at the console and see some message there, then there we also see a link to the place where this message was thrown, and we do not need to study the entire page code to find the one who left it. Need something similar...

In general, the task is to introduce an extension for the browser. functionality to appearing elements. Now just once every 20 ms, I check if something new has appeared, and if it does, I replace the content. But I want to find a better solution.

Thank you.

Answer 1

MutationObserver
Inject into the onload of the desired object: do not replace, but stand first!