Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
The Console panel is both a log and a command line tool that allows you to interact with the JavaScript on a page. You can execute existing functions, rewrite variables and functions, or create entirely new code. The console will also JavaScript errors, which is useful for debugging code.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
So here, I have my console, and, we've
already taken a look
0:00
at this before, but, now we're gonna get
formally introduced to it.
0:05
In the console, I can go ahead and type in
JavaScript,
0:09
and I can go ahead and interact with my
Javascript application here.
0:14
Like I said before, we don't actually have
any JavaScript on this page.
0:19
But we can go ahead and still write
0:23
JavaScript to interact with the page in
different ways.
0:25
So, I can go ahead and just type
JavaScript as I normally would.
0:30
So I can go ahead and get an element by
its ID.
0:35
And I know there's an element on this page
with the ID intro.
0:38
So I'm going to go ahead, and select intro
here.
0:44
Oops.
0:49
I think I actually need
0:49
to do that.
There we go.
0:50
And, here just like in the elements panel,
0:53
it's gone ahead and selected that element
for me.
0:57
And I can open it up.
I can go ahead and right click on it.
0:59
And then reveal it in the Elements panel.
1:03
So as I said previously, all these
1:05
panels are pretty interconnected in
different ways.
1:07
So that's one thing that I can do in the
console.
1:11
A shorthand way to say
1:14
this, is to use the dollar sign which is
sometimes called the
1:16
bling sign and you can go ahead and type
in an
1:21
ID and it will work very similar to jQuery
if you're familiar with that.
1:26
So if I go ahead and type in, it will do
1:32
the same thing and we'll go ahead and
select element for me.
1:35
I can do the same thing with classes and
anything else.
1:38
And if I want to recall a previous
command, I can just go ahead and hit the
1:41
up arrow on my keyboard, and I can hit the
down arrow to go forward.
1:45
Now, the console also includes a couple of
built in tools.
1:52
One of those tools is console.log.
1:58
So I can type in console and this will
give me access to the console API and
2:02
I can type in log and inside of that I can
put a string.
2:07
Now we used this previously when we wrote
our test function.
2:12
I typed in started, and I typed in done.
2:16
So I can go ahead and type that in, and if
I just
2:19
hit Enter, the console's just gonna print
2:21
out started, there's really no logic
there.
2:23
However, we can use console.log in our
JavaScript.
2:26
So if you're writing a complex JavaScript
application,
2:31
you can go ahead and drop in calls to
2:35
console.log to go ahead and print out
things like
2:38
variable names, or the values of those
variables themselves.
2:41
Just to go ahead and see what's going on
in your application.
2:45
Historically, the old way to do this was
to use an alert.
2:48
So, let me show you what that looks like.
We can go ahead and type in alert in
2:53
JavaScript, and we can do the same thing.
2:56
We can say, started, and it will go ahead
2:59
and bring up and alert window in the
browser.
3:03
This is not what you want to do anymore.
You can go ahead and use console.log.
3:06
And it's gonna be much nicer because you
can see
3:10
exactly what's going on in your program as
it's running.
3:13
We can also use other console commands.
3:17
So,
3:21
if I were to have some logic here, such as
an if statement.
3:22
And I said, 1 plus 1 is equal to 2.
3:25
That should go ahead and print
console.log, and it will print.
3:30
It works.
3:37
And if I hit enter, it should go ahead and
evaluate that logic.
3:39
And it will say, it works.
3:44
Now if I were to print something invalid
here, I would
3:47
say 1 plus 1 equals 3, it's not going to
do anything.
3:51
If it does print something, there's
something seriously, seriously wrong with
3:55
the browser or your computer, and it could
be possessed by demons.
3:59
Next let's go ahead and say console.assert,
which
4:03
is another way of creating an if
statement.
4:06
So we want to assert
4:10
whether or not something is true or false.
4:12
So, if I were to type in 1 plus 1 equals
2.
4:15
And,
4:22
we have some sort of assertion here, let's
see.
4:25
I'm not doing something quite right.
4:31
See, we want to assert, oh, cause it's not
doing anything.
4:36
Then we can go ahead and say console.log
4:41
it works.
And that should print it works, I think.
4:49
No, no, not quite.
4:52
Anyway, there's other things that cons,
the console can do.
4:54
So, if I go ahead and look up the console
4:58
API, so I'm going to go to, let's see,
Chrome
5:01
Chrome dev tools.
And I'll type in API.
5:07
And here's the command line API reference
for the Chrome DevTools.
5:17
So there's a number of different things
here.
5:23
And let's see, here is the console API
reference.
5:25
So if I go ahead and go to assert here.
5:29
okay.
I actually was using assert correctly.
5:36
We just had proper assertions, so they
weren't doing anything.
5:39
If I were to have another assertion, and
5:43
it were incorrect, it would say assertion
failed.
5:47
There we go.
5:52
And we can go ahead and open that up, and
we
5:53
can see a little bit of detail about why
that assertion
5:57
actually failed.
6:02
We're just using the injected JavaScript
from the console
6:03
so, this is probably a little bit
confusing to us.
6:06
But, if you were writing your own
JavaScript and
6:09
you had assertions inside of there, this
would probably
6:12
make more sense to you, you'd say, This
variable
6:15
or this function call is where it's not
working.
6:18
So, you'll also notice that we get nice
errors
6:22
here anytime something in the console
fails.
6:27
And that's really helpful because not only
will it show errors in the console, these
6:30
errors will also come up here if there is
actually an error in your JavaScript.
6:34
So, if you have an unexpected curly brace,
6:39
as I created here for console.assert,
which actually doesn't
6:42
take any curly braces like that, it's
gonna
6:47
say, unexpected token and say something
actually went wrong
6:49
with your JavaScript.
6:53
So you can go ahead and open that up and
figure out what's going on.
6:54
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up