Search code examples
htmlbrowserwebgoogle-chrome-devtoolsfirefox-developer-tools

How to freeze state of the dom tree (without using js "debugger" statement) to inspect it?

Maybe I'm asking too much from the browser's dev tools but... is there some way to simply freeze the state of the web page without finding the relative lines in the JS code and putting the debugger statement? (not browser specific question, any browser that can do this is good)

I have a situation where I want to inspect some DOM on the page that is only accessible after:

  • I clicked on a specific button
  • It disappears after blur event (E.g. once I located the parent element in the inspector and clicked on it, it immediately disappears).

Because it triggers on click, "Force element state" doesn't help either.

Thanks!

Solution

  • In Chrome, if you know the containing element in the interface that will be modified then right click on it and "Inspect Element" (or go straight to it in the DOM if that's easier for you), then right click on the element in the DOM and choose "Break On..." > "Subtree modifications" (or whichever other option would suit you).

    This should then pause the JavaScript execution when any elements within that DOM changes, allowing you to step through the JS using F10 etc. and see the DOM at any point during its execution.

    You could of course monitor the entire <body> this way if you don't know what will change, but that may capture too many changes, depending on how dynamic your page is.