Practice English Speaking&Listening with: Using Google Chrome Developer Console

Difficulty: 0

One of the nice things about the Google Chrome browser is its built-in developer tools.

Im 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. Ive opened up

the program debugDemo.html and

it is just a standard web page. Inside

the , heres the , weve set up a function called

displayHello( ). Ive written this out in more detail

then I need to, and I have lots of comments, so learn how to read

thegreen”. Basically I write out

aHello JavaScripton the screen

and then I set up a variable calledthisName".

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 sayHello"

the persons 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 doesnt 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 browsers 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, lets 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 hitENTER".

and it printed outSally 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 theScriptstab.

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.

Lets 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 lets 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 orgluestogether strings and variables.

Hellowith 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 youll see thatOh, I missed the + sign in there.”

Also, if you look down in the right-hand corner youll see that theres 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."

Thats 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 sayingI dont know where displayHello( ) isbecause the browser

doesnt identify a broken function.

So, lets 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 wegluein with the + concatenation operator

wegluein the variable, and then weglueor 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 dont see that right away

youll get an error like this...

Uncaught SyntaxError: Unexpected token ILLEGAL

Well thats 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.

Lets 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 Ill 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 capitalH".

But by the time the programmer got down here, in the where they called that function,

they fogot to capitalize thehso 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 didnt misspell the function name.

A lot of programmers will

copy, lets 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.

The Description of Using Google Chrome Developer Console