Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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!

like image 937
user2205259 Avatar asked Oct 05 '15 14:10

user2205259


People also ask

How do you freeze a DOM structure?

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 ...

How do I freeze an element in Inspect Element?

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.

How do you freeze the screen in HTML?

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.


2 Answers

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.

like image 198
Klors Avatar answered Sep 27 '22 19:09

Klors


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 ) )
like image 44
Supersharp Avatar answered Sep 27 '22 19:09

Supersharp