Welcome back, and we're now on S. two, less than three browser dev tools and the JavaScript console.
So we're going to look at the developer tools in the browser, which basically let you log information
associated with a Web page.
And so that, you know, those are things like network requests, JavaScript access, security errors
and warnings, as well as other errors, warnings, informational messages logged by JavaScript code
running in the page context.
So this will let you interact with a Web page by executing JavaScript expressions in the context of
the page and to access this to open this in Chrome or EDG or Firefox just right.
Click and then select inspect.
So let's take a look at that.
So you remember we have our jobs code open.
I'm going to copy this and just set it up on our list and three as well.
OK, so now we're in lesson three and we've got an HTML file and we have our JavaScript file and they've
been saved.
So let's see what we can do about looking at these in the browser.
OK, so I have a browser open now to less than three indexed HTML.
And it's just a blank page, as you can see, I don't have any content in my e-mail.
If I want to change that, I could give this a header less lesson three.
OK, if I refresh this page, you'll see less than three right there in HTML.
And now how do we get to the dev tools, you just right click anywhere and click inspect.
OK.
Tonight, here is the dev browser and we've got elements, console sources, network performance, memory,
application, security and Lighthouse won't go into everything.
Let's take a look at sources.
This will just show you what files we're looking at.
So when you're on a Web page, this will be other information.
But if you're looking at just code base or in files on your computer, then it'll show you the path
for that.
And now let's go back to elements, Elements is showing you just the HTML, as you can see, it matches
the HTML that we have in our text editor in Beast code.
And then if we want to look at the styles that we put in here, it just has these default styles.
So there's nothing special because we don't have a specific case file in here.
But it also shows us the settings that are built in by default to this, so I have a fairly small window
because of how much this is taking up.
So that's elements, and then if you go to console, this is a JavaScript console where you can actually
see JavaScript information, so if I wanted to say let X equal five.
And then we go X times to we should get 10.
There you go.
So you can just run JavaScript right here in the console and it will work just fine.
OK, in addition to that, you have the elements where you get to see the HTML and the CSFs, you have
the console where you can use JavaScript and we have sources where we saw the files.
And then we have a network where you can see if there are any scripts that are running and passing information
from this website to another website.
And there's nothing at this point.
OK, so that, in a nutshell, is the browser developer console and the tools.
So it's pretty easy to access those just right click in your browser and hit, inspect and on most keyboards,
you can also do F 12 and so that's F 12 on your keyboard to open up the same menu where you can access
all of the files that are being accessed by your website, all of the styles and HTML and then any additional
scripts or anything that's reaching out through the Internet to other websites.
OK, so that's it for lesson three.
We'll come back and listen for and talk about some common console errors that you'll find in JavaScript
and look at how those errors will affect your code.