All geek questions in one place

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

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

I have a situation where I want to check some DOMs on a page that is accessible only after:

  • I clicked on a specific button
  • It disappears after the blur event (for example, when I found the parent in the inspector and clicked on it, it will disappear immediately).

Since it fires when clicked, the "Force element state" also does not help.

Thanks!

+5
source share
2 answers

In Chrome, if you know the interface contained in the interface that will be changed, right-click on it and "Check item" (or go directly to it in the DOM, if it's easier for you), then right-click on the item in the DOM and select "Break On ..."> "Subtree changes" (or whatever you like).

Then this should pause JavaScript when any elements in this DOM change, allowing you to go through JS using F10, etc. and see the DOM at any time during its execution.

Of course, you can control the whole <body> if you don’t know what will change, but this may delay too many changes, depending on how dynamic your page is.

+1
source

In dev tools, you can set a breakpoint on any line of source code. It works the same as in Visual Studio.

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

Alternatively, you can register the state of an object after its serialization:

 console.log( JSON.stringify( state ) )
+1
source

Source: https://habr.com/ru/post/1232982/

More articles:


All Articles