How can I view the DOM while I am stepping through

问题:

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?

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

回答2:

I think I might do is instead type debugger in your js, go to Elements view in dev tool, you can right-click on the element you want to debug, and select the sub menu break on, there are several options for you to debug your DOM.

Also, you can check the element you want to debug in console by $("selector")

回答3:

Not sure if I got you right, but you can refer to DOM inspection from the Sources tab, without having to switch tabs.

In the Sources tab, you can show the console (pressing ESC worked for me), and then refer to the latest DOM changes by $0 .. $4, or any other DOM by selector. Please refer to Chrome's Command Line API Reference