Github

Break Yo Self: Little-Known Breakpoints in Chrome Dev Tools

Everyone knows that Chrome Dev Tools comes with a Javascript debugger, where you can insert breakpoints into arbitrary Javascript code:

Less people know about the other kinds of breakpoints Chrome gives us, however. In this post I'll explain how and why you'd use breakpoints for events, AJAX requests, and DOM updates.

Event Breakpoints

When starting work on a new codebase, it's very common to want to identify the event handlers that are in use on a given element. In the Elements tab if you inspect a DOM element it will show you a list of event handlers, but they include functions from browser extensions, libraries or frameworks, and are often just anonymous function objects.

Instead, navigate to the Sources tab and on the right side you will see a section for Event Listener Breakpoints. Activate Mouse::click, and click on the desired element (a button, for example). You will be able to step through all the click handlers for that element.

One problem with this, however, is that libraries like jQuery will often be first in the list, and you have to step through it each time. To prevent jQuery from appearing, right click on its filename under the "Call Stack" section of the debugger, and select "Blackbox Script". That file will be ignored in the debugger from now on, and if you click your element again it should take you directly to the event handlers from the application itself.

Of course Chrome gives you breakpoints for every single type of event, not just clicks!

DOM Breakpoints

Similarily, you might want to know what function is making modifications to a given DOM element. DOM breakpoints are available for subtree modifications, attribute modifications, and element removal.

Back in the Elements tab, right click on the element you want to observe. At the bottom of the pop-up menu, select "Break on..." and then your desired break condition. For example to break anytime a child element is added, select "Subtree Modifications". When a new child element is added, the debugger will take you right to the function that inserted it.

The same process of "Blackbox Script" applies here as well.

XHR Breakpoints

Finally, the same process can be applied for breaking on AJAX requests. In the Sources tab under XHR Breakpoints, click on the "+" button to create an AJAX breakpoint. You can specify part of all of the URL you are interested in, to filter it by request.