- [Instructor] The browser console
is the JavaScript developers' best friend,
alongside the code editor and linting tools
and automation tools.
And, okay, so the JavaScript developer
has a lot of best friends,
and the browser console is one of them.
When you write JavaScript, you work in a code editor.
The problem is, the JavaScript doesn't run
in the code editor, it runs in the browser.
So you need some way of interacting
with the JavaScript directly inside the browser.
And that's what the console is for.
Just like when you work with HTML and CSS,
you can open the developer tools and mess with the HTML
or change the CSS in some way,
and see what happens right away in the browser.
Console is the exact same thing, but for Java script.
Let me show you how it works.
Go to VSCode and go to the exercise files
for this movie, 01_05.
And you'll see, there's a file here called scriptjs
that has some JavaScript in it.
We're not covering this JavaScript just yet.
We just want to see what happens in the console.
So go down to the bottom right-hand corner,
click Go Live to open the browser.
The site is not running in the browser,
and we can go to the current folder, 01_05.
And here you see a very basic HTML document
with just some texts, all right.
Now we need to open the browser console.
The browser console is appended to the developer tools.
So when you open the developer tools,
you gain access to the console as well.
Right now, when I've opened the tools,
you can see the console on the bottom here.
If you don't see it, you can hit the Escape key
on your keyboard, and it'll open and close the console.
You can also go to the console directly
from the menu at the top here by selecting console.
And it'll take you just to the console and nothing else.
From here, we have access to everything
that's happening in the browser right now.
That is what we're seeing in the HTML.
We also have access to the actual browser window.
We can manipulate the browser window in different ways.
So for example, I can say something like window document,
and this will give me the entire document in the window.
So if I open this, you'll see, oh, here we have HTML.
So if we go into the body,
you'll see in the body we have a main,
and in the main we have a div,
and in the div we have an h3, and an unordered list,
and an unordered list, right?
So the console actually gives me full access
to everything that's happening in the browser.
And I can now experiment with it and mess around with it,
but I'm not going to work
with the window document object just now.
Instead, I want to take a look at something
that I supplied using my JavaScript.
So I'll go back to my JavaScript file.
And here you see there's a constant called backpack.
What happens if I go to the console
and just type in backpack?
First of all, you'll notice as I'm typing, the console goes,
"I think I know what you're saying here."
So it gives me everything
that kind of matches what I'm typing out,
because it's guessing ahead.
And you can immediately see there's something
in the console called backpack.
So I'll just hit the right key
to get all the way to the end of that,
and get it to auto complete, and then hit return.
What I get in return now is a response from the console.
And the response is the backpack object.
So here you see, color gray, lidOpen false,
name, Everyday Backpack.
In my code, color gray,
name, Everyday Backpack, lidOpen false.
Now the order is not the same
because this is in alphabetical order,
but the content is the same.
So that means this thing that I wrote in JavaScript
is available to me directly inside the console.
And that's kind of the whole point.
Now I can look at what's available here,
and see, is there's something I can do here?
Well, some of this information is just information,
like it says, let's see, lidOpen false.
So it's telling me that the lid is currently closed,
and you can see it up here it says top lid closed.
So there's also a function here.
This f tells me this is a function that's called toggleLid.
And it says, toggleLid function, lidStatus.
So without looking at the code,
I think I should be able to send a command
to a function called toggleLid,
and then pass a new status to it
and something should happen.
So I'll try that just from within the console.
This is, I'm kind of experimenting with the code,
saying I don't know it, let's see how it works.
So I'll say backpack.
And then I'm looking for that toggle, so I'll say toggleLid.
See, the auto-complete automatically suggested for me,
hit Enter to go in there.
And then it says lidStatus.
Okay, so I'll try to just pass a new status.
The current lidStatus is false,
so let's set it to true and see what happens.
Hit return, and we get two things.
We get this text that says lid status changed.
And then up here in top lid, it now says open, cool.
And if I now go and say backpack one more time,
you'll see when I open up this object,
it now says lidOpen true.
So in the console, I made a change to the JavaScript object
and the JavaScript object somehow interacted
with the HTML in my document and made a change.
If I jump back to the code here, you can see what happened.
So I used this toggleLid function,
you see it's a function, that captures the lid status.
So I set it to true.
Then it says this object
has the lidOpen status, matched that.
And then it calls a new function called updateBackpack
that sits up here.
And the updateBackpack function grabs my update
and then updates the HTML in the document, innerHTML,
and also console info's out the updates.
So that's why you're seeing this lid status changed.
That's the text that you saw down here, lid status changed.
Now, of course, I just crashed through a whole bunch
of JavaScripts that you don't know yet.
And that's fine, we'll go through all of this
in great detail in the next couple of movies.
But what I wanted to show you here is,
just like we have the code on the backend
inside the code editor.,
we also have access to all the stuff
that's happening in the code editor
inside the browser itself, through the console.
And this is where we can debug our code
and figure out exactly what's going on.
We'll be using the console extensively
throughout the rest of the course.
So familiarize yourself with how to open it.
That's all you need to know for now, how to open the console
and how to clear it by clicking this button here
or whatever it is for the current browser you're using.
As we move forward, we'll use the console
and I'll explain to you how it works as I use it.