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.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!