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?

1 Answer 1


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.

  • 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, 2015 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, 2015 at 10:36

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .