How can I view the DOM while I go through JavaScript breakpoints in Chrome?

Question

In Chrome DevTools, debugging JavaScript on the Sources tab (adding the line “debugger;” in the JS code and then stepping over the code using F10 / F11), how can I view the DOM while passing the code?

If my JS manipulates the DOM, very often I need to go through the JS debugger and see how the DOM elements are modified by my JS. For example, I may have to see how the elements move, whether they are deleted when they are supposed to, whether they get the right class correctly, etc.

To switch between the Sources tab to execute a single line, and then the Elements tab to see how the DOM has been changed for each line that I execute, it interferes with my debugging and does not allow me to determine how each line affects the DOM .

How to view items while executing code?

Answer 1

Mutationobserver

I don't think DevTools (starting with Chrome 59) will be equipped with your need (for now), but MutationObserver can help.

Run the following code in the DevTools console (or save it as a snippet):

var target = document.querySelector('body');
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation);
  });    
});
var config = { 
  childList: true, 
  attributes: true, 
  characterData: true, 
  subtree: true, 
  attributeOldValue: true, 
  characterDataOldValue: true
};
observer.observe(target, config);

, . body . (, node ).

. MutationObserverInit . attributeFilter ( ), .

DOM

- " " DOM Breakpoint node. DevTools , node , . , .

Answer 2

, , js, dev, , , break on, DOM.

, , , $( "selector" )

Answer 3

, , DOM "" .

On the Sources tab, you can display the console (pressing ESC for me) and then go to the last DOM changes to $ 0 .. $ 4 or any other DOM using the selector. See Chrome Command Line API Reference