Take the 2-minute tour ×
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 1 down vote accepted

In Chrome and Chromium you can right-click on a node in the Elemetns/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.

I've found no such option in Firefox's own developer tools. The Firebug extension does those options, but it would not actually break when they were activated.

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.

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

Your Answer

 
discard

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.