Tip:
Highlight text to annotate it
X
One of the nice things about the Google Chrome browser is its built-in developer tools.
I’m going to show you real quick how these work.
First we will do a quick code walk through and then we will
use the Developer Tools as well as show you some of the error messages
you are going to encounter. I’ve opened up
the program debugDemo.html and
it is just a standard web page. Inside
the , here’s the , we’ve set up a function called
displayHello( ). I’ve written this out in more detail
then I need to, and I have lots of comments, so learn how to read
the “green”. Basically I write out
a “Hello JavaScript” on the screen
and then I set up a variable called “thisName".
On line #33 we prompt the user
and ask for their name, and we give them
a default value, so as we develop, all we have to do is hit ENTER.
This will save us a lot of typing time. Once the user
types this in, and hits ENTER, that is stored in our brand new variable
thisName. Then we print it out. We say “Hello"
the person’s name, “enjoy your JavaScript journey.”
When the browser first loads this page, it takes this function
and it puts it up in temporary memory. You can think of it
as the browser saving this in its short-term memory. It doesn’t run this code.
It just holds it up in memory.
Now we go down a little further. I decided to make the page a little nicer looking by adding in
some styling. Here is the element. We styled the body and the h1.
and then we come to the
actual web page. This is what is going to display on the web page, everything that is inside of and .
It is always a good idea to
put something on the page so I normally put in an
in and describe what the page is doing.
You can see that I also put in a paragraph.
Right in the middle of the element we called the engine.
We told the browser, “Okay, put your JavaScript hat on!"
With one line we called the displayHello( ) function.
that we had earlier put in the browser’s temporary memory.
So, what the browser is going to do is display the contents of the , the paragraph,
and then it is going to jump up and run the code that we had
had put in displayHello( ). It is going to jump up here
and go through these steps right here that are inside the curly braces.
So, let’s take a look at that
by jumping over to Google Chrome.
We will run the page (File/Open File/debugDemo.html) You can see that it went in
and prompted us, so we can just hit “ENTER".
and it printed out “Sally Johnson”. Now, if we run this again
we can put something else in the prompt window, “Joe Smith"
and you can see it automatically changes it on the screen.
Now, if we want to see more of the details of what is happening
we can use Google Chrome Developer Tools. From the menu bar select
view/developer/developer tools. You can see
that there is a shortcut listed.
This opens up a whole new window down below
and you can either look at your Elements, Scripts, or Console. What we want to focus on is the “Scripts” tab.
So we are going to go into the Scripts tab.
We can also look at the Console and this is going to show us any errors.
Let’s go back to the Scripts tab
and down here at the bottom of the screen
you can see this little icon down here, this will show the Console.
We can open and close the console as we want to.
Everything is working very well, so let’s go into
our code and introduce some errors.
One of the common errors that is going to happen to you is you are going to leave out the
concatenation operator, that plus sign.
What this does is connects or “glues” together strings and variables.
“Hello” with whatever is inside this variable, thisName.
So, we are going to take out that + sign and see what happens.
Do a save (CTRL s). Go back to Google (ALT Tab),
do a CTRL r for referesh. You can see that
we have an error here, “Uncaught syntaxError: unexpected identifier"
If we look all the way over to the right we can see that it is on line #35.
If we click on that link it takes us right into that code
and shows us what is wrong. Now often this will give you
a different point of view and you’ll see that “Oh, I missed the + sign in there.”
Also, if you look down in the right-hand corner you’ll see that there’s two errors
When there's
an error in a function the entire function is ignored by the browser.
That is what is causing the second error here...
“Uncaught ReferenceError: displayHello is not defined."
That’s because if there is a syntax error the browser ignores
that function and does not handle it.
You can see that if we go down here on line #71 the program is calling displayHello( )
and it is saying “I don’t know where displayHello( ) is” because the browser
doesn’t identify a broken function.
So, let’s go fix this error.
Go back and rerun the program (CTRL r to refresh)
and you can see that everything is good. Another error
that is going to happen, is that you are going to forget a quotation mark.
You can see here that we have to put quotation marks around the strings
and then here we “glue” in with the + concatenation operator
we “glue” in the variable, and then we “glue” or join another string.
So, if you miss that second quotation mark, then
it is going to break everything. Notice when I do that, notice how
the color coding changes on the code. If you don’t see that right away
you’ll get an error like this...
“Uncaught SyntaxError: Unexpected token ILLEGAL”
Well that’s a pretty
nasty sounding error, but it basically means that you left out
the quotes somewhere on this line. Also you can
look at the lines before the error marker and the mistake might be
a line or two above where the message is. The browser isn't
smart enough to know that it is caused on a previous line.
Let’s go in and fix that error.
Put our quotation back in and do a save (CTRL s).
Go back to Google Chrome and do a CTRL r (refresh) and now our program runs as it should.
One last error that I’ll show you, that is really, really
common with new programmers, is not paying attention to
UPPER/lower case. So up here in the section,
we create a function named displayHello( ) with a capital “H".
But by the time the programmer got down here, in the where they called that function,
they fogot to capitalize the “h” so they said, displayhello( ).
And, when we run this it says,
“Uncaught ReferenceError: displayHello is not defined."
Now, this is very similar to the first error I showed you
but it is all by itself
and you can see the line here.
the key is, when you get this error all by itself, with no other
errors, then most likely it is an UPPER/lower case error
Look up in the and make sure you didn’t misspell the function name.
A lot of programmers will
copy, let’s go back to the code,
they will copy this function name (signature line)
like this (highlights the function name and hits CTRL c)
and then they will come down here
and paste it in (CTRL v). That way they know
that the name is spelled correctly.
And there we show that everything works.
So, to summarize: To view the Console use View/Developer/
Developer Tools. You can also go over here
and click on the wrench. And, when you
are in the Developer Tools, click on the Scripts tab and click on the icon in the status bar to show the Console
Keep your eyes down here in the lower right corner
to see if you have any errors.