Inspecting dynamic web page using Firebug or Chrome Dev Tools when the contents keep changing

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.