Debugging JavaScript Code

[00:00:00]
>> Jon Kuperman: Step-through debugging. So this came up at the beginning as one of the really cool things you can do with dev tools that really takes you to a level beyond what you can do with like console statements or something like that. So, how many people are familiar at a high level with this idea of step-through debugging?

[00:00:13]
Maybe in a different programming language, or something with like break points and, okay, at least some familiarity. So there's some core concepts to it. But essentially, especially people that come from non-web languages probably are used to a built-in IDE. If you're working on Java or C++, something like that, and you can pause the application.

[00:00:33]
You can step in and out of functions and kind of see all of the things, all the scope, and all the stuff available, and visualize the call stack how you got there. So it's a lot of information, as opposed to in a console log, you get a very small amount of information, like was here.

[00:00:48]
Hello, whatever, hello, too, whatever, I don't know how you all debug, that's how I debug. So you get a lot of this stuff. So the core concepts are you can start and stop the debugger. So once you're kind of done, you can stop it, or you can turn it on.

[00:01:00]
You can set break points anywhere that you'd like. You can do that via your IDE, via Chrome Dev Tools, or via the code, which we'll go into. And then once you hit a point, which is like, basically Google is telling you, hey, I'm about to execute this next line, I'm stuck on this.

[00:01:15]
You have some options so you can if it calls into a function, you can step into that function, and we'll cover this video visually you can say, I don't care about that function. Step over it to the next line, you can just do a step, which is if it goes in, it goes in, if it goes over, it goes over, that's fine.

[00:01:29]
But the important thing, the thing that this cannot do, and the important thing to remember is that it is not time traveling. And what I mean by that is it allows you to pause and inspect as it goes through its execution flow, but there is no going back, right?

[00:01:43]
You cannot going back as you restart and you do the app all over again. So you can step out of something. So, if you're on line two and you go into a function, you can step out, but you're gonna step out to line three. You can't go back in time, cuz it's not a state machine.

[00:01:56]
Now, there are some really cool tools, if what you require is time traveling. For example, there's a tool replay.io, and what replay.io does is it captures like a full binary session of everything. And that allows you to go backwards and forwards, which is really nice, but it requires you to record it in such a way.

[00:02:13]
In the dev tools or in VSCode, when you set a breakpoint, you can step into, over, you cannot go back. So I think that's just the important thing. I mean, you can always refresh and get there again, but you can't go back in a debugger. Cool, that makes sense?

[00:02:27]
It's kind of high level, so pausing, but not time traveling, all right? So let's look at the lesson of step-through debugging together, and then we'll go into a workshop.