Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
This is a free extension for the Firefox web browser, so it adds extra functionality into the web browser. And after it's been installed, you can turn it on for any page or any website that you are looking at. So I am looking at my page here. I'm going to go up to my Tools menu and turn Firebug on, just open it up. It opens up in the lower part of the screen. Although you can choose to open it in a separate window. You can adjust this and have more or less of your regular page if you want to. This is fine for me.
I have added a few more lines there but we will go through that in a moment. Now just for our purposes this font is a little small, so I am going to change some of the settings of Firebug and just zoom into that a bit more. So I can change the text size of what I'm looking at. And this should make it a bit easier to read. Now you might think, "Okay big deal, we can actually look at the code, but so what? I can already look at the code." Yes, but here is the thing. It's meant to diagnose problems. So if we've got the same problem that we had before, which is when I click the headline, it's not doing what I thought it should be doing, which is changing it.
I can use the Firebug extension to help me find out why. And the classic example here is I can set a breakpoint. So if I think that here I should be calling firstFunction, I can set a breakpoint, which will say stop whenever you get to this line. What I do is click on the gray bar to the left of it. Well, then what? Oh, it doesn't look very impressive, but what happens of course is this should only be hit when I click up here, so I am going to click. And as soon as I do, the breakpoint is hit in our code and it says okay, I have paused execution.
Now back down here what I'm going to do is say okay, let's start going through line by line. That's the power of a debugger: stepping through our code as it's actually running, not just looking at it on paper. So up here what we have is when we are in this break mode, we have got the ability to rerun code, to just hit Continue and just continue on to the next breakpoint. And we go to variety of Step Into, Step Over, and Step Out, which allows us to go into functions or jump out of functions.
The one you typically use most of the time is this one called Step Into. I am going to click that button. And what it's going to do is execute this line of code, which should move us into the function called firstFunction. So I click it once. Jump. We jump into the first line of the function. Notice that we don't jump to line 2 where the actual function name.. It is because that's not really a statement. It doesn't do anything. We're jumping into the first bit of code, the first part of the function that actually does anything.
We are just going to create a variable called a and set it equal to 5. But we are paused before this line is executed. So right now I can actually move over a and it's going to do this little tooltip that says does a have a value. And it says right now it's undefined. And in fact, over here on the right- hand side we have what's called the Watch panel, which says yes, as far as I know, there should be three variables in this function, a, b and c, and they're all undefined. None of them have values. So I'll go back up to my Play controls and I am going to say Step Into, which just goes forward.
a is now equal to 5. We are waiting to create b. I Step Over. b is now equal to 10. I can see those values either in the Watch panel over here or by mousing over them. Now we are at line 5, which is going to be a call to second function. So what should happen is if I click Step Into, we will jump onto line 9 which is the first line of secondFunction. And indeed that's where we are. Create another variable, set it, make a call to thirdFunction, we jump to line 14, and to line 15.
Now notice that we go from line 15 to line 17, when we have a blank line, there is no meaning there. We don't execute a blank line of code. It's insignificant whitespace. That's why it's also grayed out in the bar here, because it would make no sense to try and set a breakpoint there. Now one of the issues sometimes with stepping into your code and going though it line by line is sometimes it can be kind of tedious. We have got a while loop here. It's going to go around 100 times. Well, it might be a little annoying if all I had to do is just keep clicking and clicking and clicking and clicking and clicking and clicking.
I can actually see my counter, i=16, total is 1600, and I have still got 84 clicks to go, so I really don't want to do that. So I will go ahead and I'll create another breakpoint here outside of the loop before we are calling fourthFunction. And instead of saying Step Into, I am just going to hit Continue. What happens is it zooms around the loop. I can actually go over here to the Watch panel and see that it did go around 100 times and total ended up getting set to 10000.
Most of the time, they're built into applications like Integrated Development Environments, things like Xcode or Eclipse or Visual Studio. But whatever language you use, you will find debuggers can be a tremendous help in clearing up problems with your code.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 105121 Viewers
56 Video lessons · 116895 Viewers
71 Video lessons · 86111 Viewers
131 Video lessons · 41178 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.