So I'm gonna set a breakpoint right here inside swipe left, inside the callback function, right there. To set a breakpoint you just click in the gutter on the line number. Now, I can reload and we'll open up the color box. And I'll do a swipe left. Once I do that execution pauses. I can see a little message up top with a resume button and another message over here with another resume button that would let me resume execution, in other words, I've stopped now I can start again.
But if you're just using ES5 as we're using here you'll see scope anywhere there's functions. Okay, let's set another break point down here in the swipe right area. I'll let execution resume, and then let's swipe right. There we go I can see that I've stopped down here. And again, I can see the variables that are defined. So, now that we've stopped at either of these points I can see what's happening at that point in execution. Like right now I can see that the swipe direction was right and then if I resume and swipe left I can see here that the direction is set to left.
Let's resume and refresh the page. Now you can see that the breakpoints are preserved across page refreshes, which is great. So, this will only work inside Chrome obviously. If I were to switch to another browser I'd have to set fresh breakpoints over there. But inside Chrome any breakpoints that I've set will stay the same even when I refresh the page. Now if I were to go and make an edit to the html file so that these script tags moved around or changed, they might shift around a little bit. The browsers do try to keep track of what you've done.
And you might get lucky and have them stay in the right spot, but it's something you'll need to watch out for if you start making edits and then go back and check your breakpoints. Now these are breakpoints that don't execute immediately. They only execute when I do whatever this callback function is expecting. We can also set them on things that will execute every time, like say this variable assignment. So, I'll reload, and instantly we're stopped, we see here's my message here. And I can check out what is defined so far. Now you'll notice accidental global is currently undefined because I've stopped the line before the variable assignment actually happens.
One more thing about setting basic breakpoints. Now, as I said, any breakpoints that I set here in Chrome are not going to be carried over to the debuggers in other browsers or in other debugging environments like my IDE for example. But there is another way to do this. Gonna clear all these breakpoints out. And let's switch over to my editor. Here I am in the index.html file and if I click over here in the gutter it just selects lines but I can add debugger right here and save this.
Breakpoints will only be triggered when the debugger is actually open like that. So when you're done with debugging statements like this, make sure to take them out before you ship your code. So, now we've seen how to set breakpoints in different environments and how you can look at the contents of variables at the time that you've paused. But this is not everything that you can do just with breakpoints by themselves. We'll be taking a look at some more features next.
- Understanding the need for a debugger
- Debuggers in web browsers
- Basic debugger concepts
- Debugging the use of a jQuery plugin
- Remote debugging on an Android device
- Debugging a node application in WebStorm
- Using a debugger as a learning tool on a live site