1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Set and remove DOM Breakpoints

    Xiaoru LiXiaoru Li
    chrome-devtoolsChrome DevTools

    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.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    Xiaoru Li: 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.

    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.

    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.