Hide Properties from Showing Up in "for ... in" Loops in JavaScript

Set and remove DOM Breakpoints

Customize the PS1 Bash/Zsh Command Prompt in VS Code with Environment Variables

Tips and Tricks

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.

https://app.egghead.io/api/v1/lessons/chrome-devtools-set-and-remove-dom-breakpoints/subtitles

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.

Set and remove DOM Breakpoints

Share this video with your friends

Course

Tips and Tricks