Menu
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!
937
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 ...
Open the dev console - F12 on Windows/Linux or option + ⌘ + J on macOS. Select the Sources tab in chrome inspector. In the web browser window, hover over the desired element to initiate the popover.
But, you can freeze interactions with your page content within the browser window.... Just place a window sized div above the page with fixed positioning. That will prevent the user from being able to interact with anything on the main page (behind it). Then, display your modal dialog on top of that.
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.
198
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 ) )
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
