NOTE This file was generated by Descript 1 00:00:00,180 --> 00:00:03,210 When developing websites and web applications, we use a number of 2 00:00:03,210 --> 00:00:05,040 tools to help make our life easier. 3 00:00:05,220 --> 00:00:08,940 But by far, one of the most important tools is the browser itself. 4 00:00:09,360 --> 00:00:12,990 Most modern browsers come with developer tools, also called the 5 00:00:12,990 --> 00:00:17,490 web inspector, and this has a suite of tools inside it that we can use. 6 00:00:17,940 --> 00:00:20,760 Let's take a look at the developer tools, what they can do for 7 00:00:20,760 --> 00:00:22,080 us, and how we can use them. 8 00:00:22,587 --> 00:00:26,247 So here, I've got the Mozilla developer website open. 9 00:00:26,247 --> 00:00:30,267 This is a great resource for learning about web development generally, but 10 00:00:30,267 --> 00:00:33,687 we're going to use it as an example, to look at the developer tools. 11 00:00:34,137 --> 00:00:37,737 In Chrome and Chromium and Brave, you can simply right-click 12 00:00:37,767 --> 00:00:39,947 any element and press inspect. 13 00:00:40,187 --> 00:00:43,997 You can also press control, shift and I to open up the developer 14 00:00:43,997 --> 00:00:45,377 tools if you prefer shortcuts. 15 00:00:45,617 --> 00:00:49,067 Or I think F12 also opens the developer tools. 16 00:00:49,627 --> 00:00:52,147 When the dev tools are open you'll see something like this. 17 00:00:52,147 --> 00:00:54,937 I know they're a bit small but we're not really gonna use 18 00:00:54,937 --> 00:00:55,927 the dev tools in this video. 19 00:00:56,167 --> 00:00:59,287 I want to show you the dev tools and sort of what they do. 20 00:00:59,922 --> 00:01:03,912 By the way, if you are using a different browser, just do a quick search for how 21 00:01:03,912 --> 00:01:05,652 to open the dev tools in your browser. 22 00:01:05,952 --> 00:01:09,302 They're mostly the same but how to open them can differ slightly. 23 00:01:09,302 --> 00:01:12,242 And sometimes you have to change a couple of settings in your browser 24 00:01:12,242 --> 00:01:14,102 to allow you to open the dev tools. 25 00:01:14,102 --> 00:01:15,872 So that's just something to take into account. 26 00:01:16,022 --> 00:01:20,582 The developer tools allow us to add and remove elements from the websites. 27 00:01:20,792 --> 00:01:23,972 They allow us to modify the styles of elements in the websites. 28 00:01:24,272 --> 00:01:27,662 And you can even view performance information about the site 29 00:01:27,662 --> 00:01:30,812 or requests that the site is making, and a lot of stuff. 30 00:01:31,322 --> 00:01:35,702 So let's take a look at the elements here in the developer tools as 31 00:01:35,702 --> 00:01:37,112 well as the style information. 32 00:01:37,142 --> 00:01:40,352 These two are really the two main parts of the developer tools. 33 00:01:40,902 --> 00:01:45,672 You can see that as I hover over different lines in the HTML code, 34 00:01:45,702 --> 00:01:51,192 visible here, that they are displayed or highlighted in the website itself. 35 00:01:51,702 --> 00:01:55,422 That is because the element that I've got selected right now, or that I'm 36 00:01:55,422 --> 00:01:59,412 hovering over right now in the dev tools, is this piece of text here 37 00:01:59,442 --> 00:02:00,822 learn the best of web development. 38 00:02:00,822 --> 00:02:03,012 So when I hovered over it, that gets selected. 39 00:02:03,797 --> 00:02:07,427 And I mentioned earlier that we can add or remove elements using the dev tools. 40 00:02:07,427 --> 00:02:10,457 So let's just right click this element and delete it. 41 00:02:10,967 --> 00:02:13,727 Now you can see that it's completely gone from the site. 42 00:02:14,240 --> 00:02:16,880 Of course, something important to note is that, when we make 43 00:02:16,880 --> 00:02:20,900 changes using the developer tools, we're not actually modifying any 44 00:02:20,900 --> 00:02:23,510 files in the server of Mozilla. 45 00:02:23,660 --> 00:02:25,490 We're just changing them locally. 46 00:02:25,700 --> 00:02:30,425 So if we refresh the page now, you'll see that it comes right back because 47 00:02:30,425 --> 00:02:33,965 the changes that we're making using the developer tools we're making to this local 48 00:02:33,965 --> 00:02:35,885 copy of the website that we've downloaded. 49 00:02:36,305 --> 00:02:39,065 So that means you're free to play around and make any changes you like. 50 00:02:39,335 --> 00:02:43,595 And you can then refresh the site and the old version will come right back. 51 00:02:44,142 --> 00:02:47,442 This is good because it means you can play around and experiment but it's also bad 52 00:02:47,442 --> 00:02:50,262 because it means that if you do a lot of work here in the dev tools you can easily 53 00:02:50,262 --> 00:02:52,272 lose it if you just refresh the page. 54 00:02:52,272 --> 00:02:53,442 So something to be careful with. 55 00:02:53,982 --> 00:02:55,962 You can see that have zoomed in on the developer tools. 56 00:02:55,992 --> 00:02:59,412 You can do the same by pressing control shift + if you want. 57 00:02:59,862 --> 00:03:03,732 And now I'm going to right-click on this input field and press inspect. 58 00:03:04,296 --> 00:03:08,076 You can see down here that when we hovered over it, we get some nice information 59 00:03:08,106 --> 00:03:09,846 on the website about this element. 60 00:03:09,846 --> 00:03:12,966 So we can use this to, for example, to check the size of the element. 61 00:03:13,472 --> 00:03:16,442 If you look in the element browser here, you can check out 62 00:03:16,472 --> 00:03:19,207 the type of HTML element this is. 63 00:03:19,227 --> 00:03:22,437 Which is an input as you can see this is the first word there. 64 00:03:23,057 --> 00:03:27,057 And then you can see the attributes like type equals email and ID equal 65 00:03:27,057 --> 00:03:28,677 newsletter email input and so on. 66 00:03:29,217 --> 00:03:32,517 This gives you a little bit of information about what is making 67 00:03:32,517 --> 00:03:34,347 this be drawn on the site. 68 00:03:34,497 --> 00:03:36,987 We're going to learn more about HTML and how to create our 69 00:03:36,987 --> 00:03:38,577 own elements in a later video. 70 00:03:38,637 --> 00:03:40,557 But this just gives you a bit of information about that. 71 00:03:41,092 --> 00:03:44,362 So by right clicking on any element and inspecting, you can very easily 72 00:03:44,362 --> 00:03:48,262 get ahold of that particular element, which may be buried deep inside 73 00:03:48,352 --> 00:03:49,792 other elements as you can see here. 74 00:03:50,212 --> 00:03:52,102 And that way you can check out its attributes. 75 00:03:52,614 --> 00:03:55,644 On the right-hand side of the developer tools, there is this small window 76 00:03:55,644 --> 00:04:00,084 here that shows you the applied style properties for the current element. 77 00:04:00,474 --> 00:04:02,664 Don't worry too much about what that means right now, we're going to be 78 00:04:02,664 --> 00:04:06,834 talking about CSS, which is what this is, in a lot more detail incoming sections 79 00:04:07,044 --> 00:04:11,454 but it's helpful to see what sort of styles are applied to a given element. 80 00:04:12,059 --> 00:04:15,239 This style viewer is going to be an invaluable tool when we start writing 81 00:04:15,239 --> 00:04:18,599 our own CSS, as we're going to be able to spot when certain properties 82 00:04:18,599 --> 00:04:20,459 are not being applied as we intended. 83 00:04:21,059 --> 00:04:23,689 You can also play around with this and check and uncheck properties 84 00:04:23,689 --> 00:04:25,039 to enable or disable them. 85 00:04:25,219 --> 00:04:28,909 And you can see, for example, here, the element has a height of 50 pixels. 86 00:04:28,939 --> 00:04:29,629 That's what this means. 87 00:04:29,659 --> 00:04:30,469 And if we uncheck it. 88 00:04:30,674 --> 00:04:34,124 It reverts back to some default size or previous size that 89 00:04:34,124 --> 00:04:35,864 were set elsewhere in the code. 90 00:04:35,954 --> 00:04:38,084 And you can see that the text box gets a bit smaller. 91 00:04:38,774 --> 00:04:42,044 You can also add more things here using the developer tools and we're 92 00:04:42,044 --> 00:04:45,074 going to inspect how to do that later on when we learn about CSS. 93 00:04:45,587 --> 00:04:48,647 This style viewer window can also be a great learning tool. 94 00:04:48,677 --> 00:04:51,737 As you surf the web if you see something cool on another site and 95 00:04:51,737 --> 00:04:53,267 you want to know how it was done. 96 00:04:53,447 --> 00:04:56,267 You can just right click an element, look at the CSS, and it'll tell 97 00:04:56,267 --> 00:04:59,027 you exactly the styles that are applied on a certain element to 98 00:04:59,027 --> 00:05:00,647 make it look the way that it looks. 99 00:05:01,140 --> 00:05:04,480 In addition to being able to see the property declarations i.e. 100 00:05:04,680 --> 00:05:06,840 what things are applied to an element. 101 00:05:07,110 --> 00:05:10,890 You can also see the computed values and these can also be really helpful. 102 00:05:11,190 --> 00:05:15,750 If we click on the computed tab here, you can see that after all the CSS code in the 103 00:05:15,750 --> 00:05:18,120 entire site is evaluated for this element. 104 00:05:18,570 --> 00:05:21,600 What this element ends up with as CSS properties. 105 00:05:21,840 --> 00:05:23,610 So these are all displayed here. 106 00:05:23,640 --> 00:05:25,967 All the properties that are part of this element. 107 00:05:26,327 --> 00:05:29,627 And for example, if your element looks slightly weird but you don't know why. 108 00:05:29,627 --> 00:05:32,427 When you writing a CSS code, you can come to the computed tab here 109 00:05:32,517 --> 00:05:34,737 and it's going to tell you all of the things that are applied to it. 110 00:05:34,797 --> 00:05:38,337 And maybe you can see something that you didn't expect there, and it'll help you 111 00:05:38,337 --> 00:05:40,377 understand why it looks the way it looks. 112 00:05:40,870 --> 00:05:46,060 Also in CSS, we often don't specify exact values for things like an element height. 113 00:05:46,300 --> 00:05:48,550 Here for example, the hight is set to 50 pixels. 114 00:05:48,850 --> 00:05:53,710 But normally heights and widths and things like that are specified in relative terms. 115 00:05:53,740 --> 00:05:57,550 Relative to the font size of the page or relative to the 116 00:05:57,550 --> 00:05:59,230 size of the parent and so on. 117 00:05:59,650 --> 00:06:03,790 So by going to the computed tab, you can actually see the final sizes of 118 00:06:03,790 --> 00:06:05,710 everything which can also be quite good. 119 00:06:06,662 --> 00:06:08,179 Alright, that's everything for this video. 120 00:06:08,179 --> 00:06:11,599 I just wanted to tell you a bit about the developer tools so you know that they 121 00:06:11,609 --> 00:06:13,339 exist, and more or less what they mean. 122 00:06:13,549 --> 00:06:17,239 But it is one of the best and most important tools that we have available 123 00:06:17,419 --> 00:06:19,099 in our web development arsenal. 124 00:06:19,219 --> 00:06:22,279 So we're going to be using it a lot in the course. 125 00:06:22,369 --> 00:06:25,609 So thank you guys for joining me in this video and I'll see you in the next one.