#100DaysOfWeb in Python Transcripts
Chapter: Days 25-28: JavaScript Introduction
Lecture: Debugging JavaScript
Login or
purchase this course
to watch this video and the rest of the course contents.
0:01
In this video we're going to look at how to debug in JavaScript. CD-ing into my language folder I got a debugging folder and a simple HTML page
0:18
and it's actually the calculator you're going to build. The only problem is that it has a bug. This as well is not correct because
0:29
one plus zero is one and not 10. So let's see what's going on. I can go to inspect, which will open the the Chrome dev tools.
0:41
We've used console a lot throughout this lesson but now I want you to go over to the sources tab. Here we can access the source code of this page
0:52
and in this case, I have the JavaScript inline. Let's make this a little bit bigger and let's set a breakpoint right after the calculation.
1:03
Then we're going to enter one and zero, and take the sum and now it breaks into the debugger.
1:11
I opened the console below, and I can access the variables as they're set at this point in time. So this is actually the bug and to fix it
1:26
you can use parse int on both variables and that works so I can apply the fix in the source
1:59
take away the breakpoint refresh the page, and that now works. I do want an A, I got a NAN, not a number which is what I expect.
2:13
There is a lot of options you can: step into a function call step out of the current function just do a step, for example, if this would be a for loop
2:24
you can step through every loop with step can pause, resume, etc. But here, I just wanted to show the very very basics:
2:33
how you can look at your code in realtime by setting a breakpoint. When you write JavaScript, I highly encourage you to
2:39
become familiar with the dev tools in the browser of your choice because it will speed up your web development.
2:47
Talking about bugs and potential issues. In the next video, I will show you some common JavaScript gotchas.