Setting Breakpoints for the DOM

When building a web app, sometimes we need to approach it top-down. Ever encountered a situation where you can see the bug in the UI visually, but virtually have no idea what is the cause?

Luckily for us, modern browser devtools allow us to set breakpoints not only on the JS code, but also on the DOM as well! We can easily pin down the offending lines deep inside the code base, by pausing the execution based on DOM changes.

First, identify the DOM element that we want to monitor, then right click it and go to Break on. We have 3 different options for how this breakpoint shall be triggered.

Setting a DOM Breakpoint
Setting a DOM Breakpoint

Now, whenever the DOM element we are monitoring gets some update (depending on the option we chose), the breakpoint will get hit, and we can inspect what is happening at that point in the source tab.