This course has been updated! We now recommend you take the Introduction to Dev Tools, v3 course.
Transcript from the "DOM Breakpoints" Lesson
[00:00:00]
>> 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:00:57] What you can do is you can right-click on that element, and you can do this break on here. So you get three choices. For all intents and purposes, break on means show me the JavaScript that does what? And so you can break on node removal. So what's deleting this thing?
[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:01:52] So you can see in the background, this is no longer changing colors. So this is pretty powerful. So I can see exactly what caused this red border to change to blue border, and here is where I could change it to black border. I know the example is a little bit contrived, but this will always work if you can see anything that's changing your DOM structure in any way, you can set a breakpoint on that, and it'll take you right to the line of JavaScript that's executing it.
[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.