CODEWITHSUNDEEP
htmlbrowserwebgoogle-chrome-devtoolsfirefox-developer-tools
user2205259
user2205259

Reputation: 563

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:

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

Thanks!

Upvotes: 6

Views: 4413

Answers (2)

Klors
Klors

Reputation: 2674

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.

Upvotes: 3

Supersharp
Supersharp

Reputation: 31171

In the dev tools you can set a breakpoint at any line in the source code. It works just like in Visual Studio for example.

The breakpoint will remain active even if you stop and restart the browser. It works with Chrome / Firefox / Internet Explorer at least.

Alternately, you can log an object state after it is serialized:

console.log( JSON.stringify( state ) )

Upvotes: 1

Related Questions