Tip:
Highlight text to annotate it
X
Many of the modern browsers such as Google Chrome and FireFox
have their own built-in tools
so you can help debug your code. The quickest way
to get into these tools is to right-mouse click on the screen
and look for "inspect element."
The Console will show you any
error messages. So, I'm going to click on the Console and run the program
You can see that everything runs
as it should.
Now, a common error that happens
because JavaScript is case-sensitive, if you have a function
here on line #8 we are defining a function that will go into memory
called displayHello() with a capital "H". And if I go down
inside my code and I call that function, displayhello( )
with a lower case "h", let's watch what happens.
I do a CTRL r to refresh
and there is my display
Hello, so everything looks good so far
If I step through the program and error
comes up and it says, "An uncaught reference error, displayhello is not defined."
It tells me the error is on line #41.
So, I go back to my code and look at line #41
and here is my displayhello( ). JavaScript
is looking for a displayhello( ) function with a lower case "h"
and it doesn't know how close this really is.
It doesn't recognize these two as matching.
One of the tricks I use, is highlight the function name
do a CTRL c (copy) and then
down where the function is called, use CTRL v for insert
and now I know those two match. Oops, I got an extra parenthesis.
I do a Save (CTRL s)
go back to the page, and it comes
back up without any errors.
Now you can see there are no errors and everything is
ready to go.
Use the Console tool to
help you find syntax errors in your code.
Use the copy/paste trick to duplicate your
function names exactly.
And, use "Inspect Element" to bring up these debugging tools.
When you are all finished
all you have to do is click on the close window x and you'll be back
to the regular web page.
Here is the same page in FireFox
Again, to display the debugging tools we will right-mouse click on the screen
and choose "Inspect Element with Firebug" notice that they added the Firebug wording on the side.
The Console is over
on this side. Here is the console
and if I do a refresh
the page comes up.
You can see that I have no errors. Let's go in and introduce an error
[put an X in the displayHelloX( ) function call.
Run the page again. Right away you can see
that the browser is looking for displayHelloX( ) and it can't find it.
The error is on the same line.
So, the tools looks slightly different but the same elements
are there. The Console is there. To close the
FireFox tools click on the "x" over on the right side of the screen.
That puts us back to our window.
Let's go in and fix the error.
and make sure our page runs.
There we go.
As browsers get upgraded their tools will change slightly, but once you know the basic principles
you will be able to utilize these tools on any modern browser.