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?

Murdoch

I haven't found an easy way to do this. I just switch between the tabs. – Whiskey

Paste the reference to the node you want to view in the console, then you can view a simplified tree. – Fidgety

Or just put a reference to the DOM element in the watch panel. – Caricature

Tab Elements, select the element you want to monitor, RMB, Break on... Attribute modifications. Enable, step into JS & when you are finished, uncheck. – Castroprauxel

Related: Is it possible to open multiple instances or split view of chrome developer tools tabs? – Spleenwort

The first feature that came to mind was the Quick Sources drawer tab, but unfortunately that doesn't reflect changes made to the DOM. (As of Chrome 59) – Disassociate

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.

Disassociate

Wow, very cool. I will have to use this soon. It seems like a powerful tool. – Murdoch

Answer 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")

Ledoux

Answer 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

Manganite