Tips and Tricks
Set and remove DOM Breakpoints
When building a web app, sometimes we need to approach it top-down. Modern browser devtools allow us to set breakpoints not only on the JS code but also on the DOM as well, so we can easily pin down which lines of code are to be executed deep inside the code base, by pausing the execution based on DOM changes.
In this lesson, we will learn how to set and remove DOM breakpoints in Chrome DevTools.
Xiaoru Li: [00:00] Here, we have a simple clock app. We want to debug which line of code is updating the h3 node with the id time here.
[00:09] To do this, we can set a DOM breakpoint by right-clicking on this node, then break on subtree modifications. This way, the debugger will pause the execution next time when the content of this node or its child nodes is modified and bring us to the line of code that attempts the mutation, so we can start debugging.
[00:29] To remove the breakpoint, we can go back to the Elements tab, then either right-click on the DOM node again to deselect, break on subtree modifications, or we can go to DOM Breakpoints here. Now, we can deactivate the breakpoint or remove it.