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

Question

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

If my JS is manipulating the DOM, it is very common that I need to step through the JS debugger and watch how the DOM elements are modified by my JS. For example, I might have to see how elements are being moved, whether they are being removed when they are supposed to, whether they are getting the correct class at the correct time, etc.

Having to switch back and forth between the Sources tab to execute a single line and then Elements tab to see how the DOM was modified for every line I execute gets in the way of my debugging and keeps me from being able to tell how each line is affecting the DOM.

How can I view the elements while stepping through code simultaneously?

Answer 1

MutationObserver

I don't think DevTools (as of Chrome 59) is equipped to handle your need (at the moment), but a MutationObserver might help.

Execute 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);

This is about as verbose as it gets. It logs every change to body or any of its descendants. You can tweak the code to track less changes (e.g. by observing a more specific node, or turning off the config flags).

See MutationObserverInit for a description of all of the config flags. There's also an attributeFilter flag (not used in the code sample) which may be of use to you.

DOM Breakpoint

Another option is to set a "subtree modification" DOM Breakpoint on a node. DevTools pauses whenever the node or any of its children is added or removed, or its contents are changed. However, it doesn't track attribute modifications, so that may not be enough for this scenario.