Practice English Speaking&Listening with: Using FireBug Console for Faster JavaScript Development

Difficulty: 0

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.

The Description of Using FireBug Console for Faster JavaScript Development