Chrome Developer Tools Break on DOM Change

May 13, 2015
Developer Tools JavaScript

Today, my coworker Kelly King showed me a really cool thing you can do with the Chrome Developer Tools.

You can set breakpoints on changes to specific parts of the DOM, instead of manually placing them inside your JavaScript.

Use Case

I find this technique particularly useful when you’re trying to figure out what JavaScript is responsible for a certain visible change in the DOM. For example, if a table is getting populated with numbers and you want to find the code responsible for it.

The Approach

First you’ll want to open up inspect element and make sure you are on the “Elements” tab.

Next, find the container element of whatever DOM node you are curious about and right click on it.

Select “Break on…” and then “Subtree Modifications” as pictured below.

Screen Shot 2015-05-12 at 10.01.29 PM

Now refresh the page, or simulate whatever interaction causes that part of the DOM to change and you’ll be dropped into the JavaScript sources tab with a breakpoint on the appropriate line of code. Pictured below.

Screen Shot 2015-05-12 at 10.02.09 PM