Tool that compares a webpage before and after javascript execution

[Dani]

I was thinking of building a little tool that compares a webpage's DOM structure before and after javascript execution and performs a diff. I know that the functionality is already built into some paid SEO tools, but was just curious if you thought that having a standalone feature would be worth the time investment?

[Salem]

What constitutes "before" and "after"?

The DOM could potentially change every time the mouse moves.

[gediminas.bukauskas.7]

Site https://www.geeksforgeeks.org/javascript/how-to-execute-after-page-load-in-javascript/ explains asynchronous loading of the JS. Select appropriate event mentioned in this article.

[Dani]

What constitutes "before" and "after"?

The DOM could potentially change every time the mouse moves.

After page load, before any user interactivity.

[Dani]

Essentially the purpose of the tool would be so that a developer could easily spot things that are unintentionally added to their DOM as a result of Javascript they've included, such as ads including tracking pixels, Javascript manipulating the page, etc.

The thought is that it would also be useful to pages that have Javascript-rendered front-ends to make sure that they're search engine friendly.

[Dani]

Site https://www.geeksforgeeks.org/javascript/how-to-execute-after-page-load-in-javascript/ explains asynchronous loading of the JS. Select appropriate event mentioned in this article.

I would use headless Chrome to execute the Javascript and tell me when the DOM is ready.