Sign up ×
Super User is a question and answer site for computer enthusiasts and power users. It's 100% free, no registration required.

If I want to DOM Inspect some web app which changes its DOM structure too often Firebug and Chrome inspector reflecting those changes not allowing me to actually inspect them.

If I focus on one element and want to look better at it and that element is removed I can't normally inspect that element.

Is there any way to "freeze" the the web page on a certain point or just freeze the DOM changes in inspector only for those tools?

share|improve this question

1 Answer 1

up vote 4 down vote accepted

In Chrome and Chromium you can right-click on a node in the Elements/Inspector tab of the developer tools and chose to break on subtree modification, attribute modification, and node removal. Though you can't add conditions on these breakpoints, like only breaking when a certain variable holds a specified value, these are the best options I've found.

In Firefox the events you can break on are found by clicking on the Expand panes button on the right side of the Debugger tab.

Breaking on subtree modification is very useful if you don't know where the DOM will be modified. Simply set that condition on the body node (or higher) and it will instantly halt any script modifying the DOM below the body node. This is also very useful when a node you want to inspect does not yet exist, but you know where it will be inserted so you can break on the parent being modified.

The DOM will essentially be frozen in the state it is in just before the actual change happens (like a node gets inserted), with the script debugger sitting on the line which triggered the modification.

One problem is that the browser window gets an overlay which is preventing any interaction with it, even right-clicking and selecting other elements to inspect. It is still possible to inspect other nodes by selecting them in the Elements tab or by first clicking the "Select an element on the page to inspect it" icon in the top left part of the tool window.

If you're looking to inspect what the DOM looks like when certain elements have :focused , :hover, :active, or :visited, you can also force those states through the right-click menu in the Elements tab.

share|improve this answer
If I'm not mistaking what this answer is about, one can manually break in Firefox by opening the Debugger and either clicking the pause button or pressing F8. This suggests that Firefox can also "break on DOM events". – epimorphic Feb 28 at 5:40
Thanks, I've updated the answer to include a note about Firefox's events. It seems it may only be possible to break on, for example, all mouseover events on the page and not just for a specific element. – TwoD Feb 28 at 10:36

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.