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
:visited, you can also force those states through the right-click menu in the Elements tab.