Tip:
Highlight text to annotate it
X
Using Firebug Console to catch CSS and JavaScript errors.
This video will show you how to use
Firebug to find CSS and JavaScript errors in your
code. First of all we will open up our
sample page: fireBugDemo.html
You can see it here. If I do a refresh (CTRL r)
it asks for the user's name
and it prints it out on the screen.
I'm using the
JavaScript to show where we are printing things out. This is in
the displayHello( ) function, and this is in the displayHello( ) function
This is in the body.
If we look at our code
we can see
here is the function displayHello()
This is a little bit of CSS (Cascading Style Sheet) that styles and makes things look pretty
Here we style our body with a background color
as well as the h1 element
and here is the main body of the page, you can see the h1 here
"Using FireBug to check for code errors"
and here is the paragraph. In the middle of the paragraph
we set up a JavaScript element
or block
and using document.write( ) function
we call the function. RIght here the program jumps
up into the memory we have from the head
and it calls this block of code right here.
Real quickly, what this block of code
does is it writes out this phrase... and then it writes out two carriage returns
and you could put this all on one line
like we did down here: here's a document.write( ) and we put it all on one line.
Or, you can break it into two lines.
We set up a variable, or bucket, to hold information,
We used the built-in prompt( ) function
to ask the user what his or her name was. We put in a default value
so we didn't have to type anything. If the user just hits enter
that automatically puts this value into the variable.
and then we print out whatever is in that variable/bucket along with some more information.
and a line return.
So, once again, to
run the page, it asks us for a user name
[typing in a different user name than the default]
and you can see that the program took the value that the person typed in
and output the text.
Now, we have FireBug loaded
and you can see that by looking at Tools/Add-Ons
.
and you can see that we have FireBug.
Here is our FireBug
and we can disable it if we want.
Firebug does take up a lot of resources. So, if your web pages are loading slowly
you will probably want to disable it when you are not using it.
Down here in the lower right corner you can see the FireBug icon.
If I turn that on,
you have lots of options you can use in here. But, we are going to focus on the Console.
We are going to make sure the Console is enabled,m
we are going to have FireBug show our JavaScript Errors
as well as our CSS errors.
I'm going to go in and break the code
Let's break the CSS first.
Let's remove this colon right here.
So, I make the change
save the file, and go back to the browser,
and run the page (CTRL r for refresh)
and right away, by looking in the Console tab, we can see that we have an error.
It was expecting a colon
and it found a value instead.
FireBug gives us a line, it shows us where it is broken
and it gives us a line number. We will go to that line
and you can see that it stops right there. So, let's go back into our editor
and here it saw the error on line #48
there is a colon missing. So, let's fix that and take out the semi-colon
see if that does anything.
.
It shows up on the HTMN tab, so click on the Console tab
and it tells us that "I didn't find the semi-colon."
Again, go back to the editor, look at line #49
and that line is okay but it is the line before
where it is broken which made FireBug think that it was line #49
I made the fix, did a save (CTRL s) and did a Refresh (CTRL r)
and click on the Console tab
and I see that there are no errors.
Now, FireBug can also
and very helpfully, catch lots and lots of JavaScript
coding errors. Let us go in the code and
just through in
ahhh, let's forget to put in that concatenation marker
that plus "+" sign. So, this takes our variable name
and adds it on to this string. Let's say we forgot to type that in
We do a refresh. Right away, FireBug goes into our script
and says "Whoop! There's a problem here." But, if you look at the Console tab,
it will tell you exactly what is happening.
It is missing a parenthesis ")" after the argument list.
Go to line #30
The reason FireBug thinks it is missing a parenthesis
is because with that plus sign missing FireBug doesn't know what to do.
FireBug is thinking it is missing the parenthesis. After awhile you'll learn that error message.
That really means we had to concatenate.
If you leave a quote out, let's see what happens
well, let's fix this and make certain it runs....
Notice how many times we've gone through this program
and we haven't had to type in a name for the prompt( ) box.
Now it says that displayHello( ) is not
defined. [This is the browser's cache showing us old code....]
We have to go in
and see there is probably some error.
All it takes is one
error for it not to work.
[Trying it again after not finding any errors.]
I think it was
the cache. I think I had old memory that was
showing. Now I show that the program is okay.
If I do have errors showing I can clear the Console and show it again
Let's add one more error. Another thing that happens
is to leave off a quotation mark
Let's say we move this all onto one line.
Notice how the color coding changes as I type showing that something is wrong.
I leave the quotation mark off.
Right away FireBug tells me there is a problem in that function
so I go to Console and it tells me it is on line #22
and if I look in the code on line #22
then we have to sort through the code to see what is going on
and we can either do it like this, and concatenate
on our line breaks or
we can merge them altogether. Let's try this and see how it works.
I'm going to clear the Console.
Get rid of all the old errors and then I'm going to do a refresh (CTRL r)
[The Browser's cache is in the way again.]
Now, let's try refresh again.
There we go. It was just in our memory.
I can also merge the strings all together and see if that works
and we can see that it does. Everything works up here and we are good to go.
Now, to turn my FireBug off I can either click on this 'x' here
or I can click on the FireBug icon in the lower right corner of the screen.
That brings me back to my web page.
So, that shows how to use FireBug to catch to CSS errors
as well as JavaScript errors. You'll find the
Console a great tool and one that you should use
often to help catch your errors when your functions aren't working.