Is there anyway to freeze or lock the DOM of a page?

Question

Is there anyway to freeze or lock the DOM of a page, so no further changes (CSS or Javascript etc) can be made to it?

I keep having difficulty in finding elements that appear or disappear when the div or page loses focus.

My normal approach of right clicking an element to inspect it makes the element disappear from the DOM.

By manually searching through the DOM Inspector, I can find the element, but as soon as I click on it inside the Inspector the element disappears from the DOM.

This whole situation results in certain interactive parts of the page being complete unreachable. I cannot find out what CSS rules are applied to them, what line number in which CSS file I should look or anything. And I really dont want to have to search through multiple CSS files, looking at each rule and trying to figure out if this is the rule I am looking for.

Answer 1

Have you tried using one of the options in Break on... in the context menu for DOM elements in the Chrome Developer Console?

For example, Break on Node removal. This will act as a breakpoint for removal of a particular DOM element.

(click the image to see it larger)