- Accessing the DevTools 2:52
- Accessing the DevTools 4 questions
- The Elements Panel 6:31
- The Elements Panel 4 questions
- The Resources Panel 3:36
- The Resources Panel 4 questions
- The Network Panel 8:50
- The Network Panel 4 questions
- The Sources Panel 3:29
- The Sources Panel 4 questions
- The Timeline Panel 5:26
- The Timeline Panel 4 questions
- The Profiles Panel 5:44
- The Profiles Panel 4 questions
- The Audits Panel 2:29
- The Audits Panel 3 questions
- The Console Panel 6:59
- The Console Panel 5 questions
- The Console API 3:48
- The Console API 3 questions
- Adjusting Settings 4:34
- Adjusting Settings 3 questions
Preview
Video Player
00:00
00:00
The Console Panel
6:59The 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.
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