Mastering Chrome Developer Tools v2 DOM Breakpoints
This course has been updated! We now recommend you take the Introduction to Dev Tools, v3 course.
Transcript from the "DOM Breakpoints" Lesson
>> Jon Kuperman: You can break on DOM changes. This is one of my favorite ones. So again, a lot of times, I hope around a lot at work, I'll work on a bunch of different websites and apps. And a lot of times, I'll get a bug assigned to me, and I can visually see the bug, I know what's going wrong.
[00:00:15] I have no idea what the code base is like, I don't know where to start looking or what file to be in, anything like that. And so I think that it's probably pretty common and it's really intimidating. So one really cool thing that you can do, when we get into the debugging section, we'll talk about breakpoints.
[00:00:29] But for now, what we can talk about is if you can see something going wrong, like something is becoming the wrong color, or it's animating incorrectly, or anything like that is happening, and you don't know where it is in the code, you can set what's called a DOM breakpoint.
[00:00:43] So what we can do here is we can go to this li we have it selected here. And let's say that it's changing here the border from red to blue and it's supposed to be red to black, or something like that, right? I have no idea where that code is, right?
[00:01:13] Why is it getting removed? You can break on attribute modification, which is some data attribute, a class, an id, some property of this element that's being changed and I wanna know why. Or you can break on subtree modifications, which means something inside this tree, something nested inside this is changing in some way.
[00:01:32] And so if we go ahead and we break on attribute modification, cuz we can see the classes are changing, it'll do a breakpoint. And so what it's done here, I didn't click anything, I know it was really fast, is it's waited for the change to happen. And then it has moved us over into the sources tab, opened up the file that needed the change, highlighted it, and then paused execution.
[00:02:15] So I'm gonna go down here, I'm gonna deselect these breakpoints, and I'm gonna hit Play for now. We'll get into the debugger a lot later.