1
00:00:00,500 --> 00:00:06,320
Welcome back, and we're now on S. two, less than three browser dev tools and the JavaScript console.

2
00:00:06,800 --> 00:00:13,730
So we're going to look at the developer tools in the browser, which basically let you log information

3
00:00:13,730 --> 00:00:15,200
associated with a Web page.

4
00:00:16,190 --> 00:00:23,300
And so that, you know, those are things like network requests, JavaScript access, security errors

5
00:00:23,300 --> 00:00:30,020
and warnings, as well as other errors, warnings, informational messages logged by JavaScript code

6
00:00:30,500 --> 00:00:32,000
running in the page context.

7
00:00:32,330 --> 00:00:38,420
So this will let you interact with a Web page by executing JavaScript expressions in the context of

8
00:00:38,450 --> 00:00:44,510
the page and to access this to open this in Chrome or EDG or Firefox just right.

9
00:00:44,510 --> 00:00:47,120
Click and then select inspect.

10
00:00:47,480 --> 00:00:49,010
So let's take a look at that.

11
00:00:50,890 --> 00:00:54,320
So you remember we have our jobs code open.

12
00:00:55,420 --> 00:01:00,580
I'm going to copy this and just set it up on our list and three as well.

13
00:01:01,780 --> 00:01:08,050
OK, so now we're in lesson three and we've got an HTML file and we have our JavaScript file and they've

14
00:01:08,050 --> 00:01:08,560
been saved.

15
00:01:08,560 --> 00:01:12,160
So let's see what we can do about looking at these in the browser.

16
00:01:13,540 --> 00:01:17,620
OK, so I have a browser open now to less than three indexed HTML.

17
00:01:18,770 --> 00:01:22,340
And it's just a blank page, as you can see, I don't have any content in my e-mail.

18
00:01:22,340 --> 00:01:29,270
If I want to change that, I could give this a header less lesson three.

19
00:01:32,200 --> 00:01:36,160
OK, if I refresh this page, you'll see less than three right there in HTML.

20
00:01:37,400 --> 00:01:42,770
And now how do we get to the dev tools, you just right click anywhere and click inspect.

21
00:01:43,370 --> 00:01:43,790
OK.

22
00:01:44,790 --> 00:01:54,650
Tonight, here is the dev browser and we've got elements, console sources, network performance, memory,

23
00:01:54,800 --> 00:01:58,850
application, security and Lighthouse won't go into everything.

24
00:01:59,240 --> 00:02:00,940
Let's take a look at sources.

25
00:02:00,950 --> 00:02:03,550
This will just show you what files we're looking at.

26
00:02:03,590 --> 00:02:06,290
So when you're on a Web page, this will be other information.

27
00:02:06,690 --> 00:02:12,560
But if you're looking at just code base or in files on your computer, then it'll show you the path

28
00:02:12,560 --> 00:02:13,010
for that.

29
00:02:16,050 --> 00:02:22,110
And now let's go back to elements, Elements is showing you just the HTML, as you can see, it matches

30
00:02:22,110 --> 00:02:25,410
the HTML that we have in our text editor in Beast code.

31
00:02:28,250 --> 00:02:32,360
And then if we want to look at the styles that we put in here, it just has these default styles.

32
00:02:32,360 --> 00:02:37,060
So there's nothing special because we don't have a specific case file in here.

33
00:02:38,530 --> 00:02:45,370
But it also shows us the settings that are built in by default to this, so I have a fairly small window

34
00:02:45,370 --> 00:02:46,960
because of how much this is taking up.

35
00:02:47,830 --> 00:02:54,280
So that's elements, and then if you go to console, this is a JavaScript console where you can actually

36
00:02:54,280 --> 00:02:59,020
see JavaScript information, so if I wanted to say let X equal five.

37
00:03:00,740 --> 00:03:04,370
And then we go X times to we should get 10.

38
00:03:04,700 --> 00:03:05,240
There you go.

39
00:03:06,230 --> 00:03:10,990
So you can just run JavaScript right here in the console and it will work just fine.

40
00:03:13,320 --> 00:03:19,470
OK, in addition to that, you have the elements where you get to see the HTML and the CSFs, you have

41
00:03:19,470 --> 00:03:23,880
the console where you can use JavaScript and we have sources where we saw the files.

42
00:03:24,690 --> 00:03:30,480
And then we have a network where you can see if there are any scripts that are running and passing information

43
00:03:30,480 --> 00:03:32,270
from this website to another website.

44
00:03:33,150 --> 00:03:34,320
And there's nothing at this point.

45
00:03:35,640 --> 00:03:44,880
OK, so that, in a nutshell, is the browser developer console and the tools.

46
00:03:45,860 --> 00:03:52,280
So it's pretty easy to access those just right click in your browser and hit, inspect and on most keyboards,

47
00:03:52,280 --> 00:04:00,110
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

48
00:04:00,110 --> 00:04:11,330
all of the files that are being accessed by your website, all of the styles and HTML and then any additional

49
00:04:11,330 --> 00:04:15,620
scripts or anything that's reaching out through the Internet to other websites.

50
00:04:17,390 --> 00:04:20,010
OK, so that's it for lesson three.

51
00:04:20,060 --> 00:04:25,490
We'll come back and listen for and talk about some common console errors that you'll find in JavaScript

52
00:04:26,090 --> 00:04:29,150
and look at how those errors will affect your code.