Tip:
Highlight text to annotate it
X
This video about debugging.
I'm going to do 2 things in this video.
First I'm going to introduce you to the debugger built into Firefox to debug a web page.
And secondly I'm going to transfer that knowledge to debug Firefox itself.
I won't show you all the features that you can use just yet, but I'll show you a few basics.
So first I'm going to show you the most simple example that I can come up with.
And that's randomly generating 2 numbers, and then adding them.
As you can see right here 1 + 5 is definitely not 7 last time I checked.
So there's a bug there.
And we're going to go through fixing this bug using the debugger.
So the first step that I wanted to do is to show you the source code.
And you can see that it's very simple, it just defines a function that takes in 2 parameters x and y.
It prints out the value of x a plus symbol and then the value of y.
Then it prints out equals.
It computes the result: x + y, and there's the obvious bug + 1.
And then it writes that result out to the screen.
Now in this case it's pretty obvious, you wouldn't need a debugger.
But we're going to use a debugger just to see the debugger features.
Down here, you can see this is run when the page loads.
It just prints: Oh my god! A random number!
Then it basically calls that function, computes 2 random numbers between 0 and 10, truncates them, and the same right there.
So I'm going to close this source code.
And I'm going to hold down Alt.
Go to the Tools menu up here.
Go to Web Developer.
And select Debugger.
And Control + Shift + s is the shortcut key.
OK so now you see the source code down here.
And you can see over here it has the files. If I had multiple source files they'd show up here.
And the first thing I'm going to do is set a breakpoint inside that add function.
To do that you click just to the left of the line number.
And you can see the breakpoint showing up right here.
Now I can enable the breakpoint just by keeping that checked.
Or I can disable it by clicking it.
And it's sometimes useful when you're trying to figure out a problem, to be able to enable and disable breakpoints.
So just keep that in mind.
So the next thing I want to do, since this code is only run when the page reloads.
Is I'm going to reload the page, and you can see that it stopped here before it actually did all of the printing.
This line just prints out x + y
and what you can do to go to the next line,
is click this little button right here, Step Over, or F10.
And you can see that it printed 5 + 5.
So the 2 random numbers that it picked was 5 and 5.
And then there's this document.write equals.
So I'm just going to step over this line as well.
And you can see that it added the equals there.
And now I just wanted to show you on the right here, there's this Watch window right here.
So I can click there, and I can type any expression I want.
I'm just going to type result.
And you'll see that it says undefined right now.
And that's because we haven't hit this line yet.
We're just before the line.
So I'm going to Step Over that line.
And you can see that result just changed here.
It highlighted, and it says that the result is 11.
Now underneath this watch window, you can collapse it, you can see this function scope variables.
This is anything that's valid only within the function.
I'm going to collapse that, and underneath that there's global scope.
So if I had any global variables, they'd show up there as well.
So by debugging I can see the value of all the variables at a certain time.
I can see that 5 is x and 5 is y.
And result is 11.
And that obviously doesn't make sense [arithmetically]
And so I can see right here is my bug, the +1.
So the next thing I would do is open up my source code.
And I would take off this + 1.
Save and quit.
And I'm just going to press this little Go button,
which just means resume execution until the next breakpoint.
So it's 5 + 5 = 11 because the source didn't reload yet.
And I'm going to reload the page now, and you can see it has the new source code here.
There's not a + 1 there.
And just resuming execution, it shows the correct result now.
1 + 3 is obviously 4.
Now I just want to show you one extra feature of the debugger that I haven't shown yet.
When I reload here, it hits the breakpoint.
And sometimes when you're inside a function, you're not sure where that function is called from.
What you can do is you can use something called the callstack.
So right now you're currently within this frame of the callstack.
Now you can go back to see what called that function, by clicking right there.
And you can see what called that function.
And to go back to where I am I just click right there.
And if I had something that called that, it would show a third button right there that I could click.
So that's the main things I wanted to show you about the features of the debugger itself.
And now I'm going to actually show you how to use those features with the browser.
So now I'm just going to go here, to the settings icon.
I'm going to scroll to the very bottom.
And there's 2 checkboxes, enable chrome debugging, and enable remote debugging.
Put both of those on.
And I'm just going to close this now.
And I'm going to make the window a little bit smaller.
And now when you go to the Alt menu, go to Tools, Web Developer, and your now going to see this Browser Debugger item.
I'm going to click that.
I'm going to make that smaller and just put it alongside.
And right here, you'll see on the main window it's asking for an incoming connection from the debugger.
Just say OK.
And I'm just going to adjust this stuff a little bit more.
OK so it's basically the same idea.
All your source files are on this side.
You can use this little search scripts since there are a lot.
So for example if I want to find tabbrowser.xml.
And let's say within that file I want to search for loadURI
And I'll just set a breakpoint there.
And when I go up here, and I try to press enter to load the URI.
You can see that it actually stopped.
Now if I try to interact with the browser up here, it won't let me.
And it's actually paused execution, and I can Step Over and I can do all of the same things that I did before.
And you also have this Function scope as well as Global scope variables.
And there's obviously a lot more than in the previous example.
And that's the basic idea. And you can use all the same principles that you used with the content debugger.
And that's all I have for this video.
Subtitles by the Amara.org community