#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.
0:06 CD-ing into my language folder
0:09 I got a debugging folder
0:13 and a simple HTML page
0:17 and it's actually the calculator you're going to build.
0:19 The only problem is that it has a bug.
0:24 This as well is not correct because
0:28 one plus zero is one and not 10.
0:32 So let's see what's going on.
0:34 I can go to inspect, which will open
0:37 the the Chrome dev tools.
0:40 We've used console a lot throughout this lesson
0:43 but now I want you to go over to the sources tab.
0:48 Here we can access the source code of this page
0:51 and in this case, I have the JavaScript inline.
0:55 Let's make this a little bit bigger
0:57 and let's set a breakpoint right after the calculation.
1:02 Then we're going to enter one and zero, and take the sum
1:06 and now it breaks into the debugger.
1:10 I opened the console below, and I can access the variables
1:13 as they're set at this point in time.
1:19 So this is actually the bug and to fix it
1:25 you can use parse int on both variables
1:35 and that works
1:40 so I can apply the fix in the source
1:58 take away the breakpoint
2:00 refresh the page, and that now works.
2:05 I do want an A, I got a NAN, not a number
2:11 which is what I expect.
2:12 There is a lot of options
2:14 you can: step into a function call
2:17 step out of the current function
2:20 just do a step, for example, if this would be a for loop
2:23 you can step through every loop with step
2:26 can pause, resume, etc.
2:29 But here, I just wanted to show the very very basics:
2:32 how you can look at your code in realtime
2:34 by setting a breakpoint.
2:36 When you write JavaScript, I highly encourage you to
2:38 become familiar with the dev tools
2:41 in the browser of your choice
2:43 because it will speed up your web development.
2:46 Talking about bugs and potential issues.
2:49 In the next video, I will show you
2:51 some common JavaScript gotchas.