WEBVTT 00:00:00.338 --> 00:00:02.900 In this video we're going to learn about the DOM Inspector. 00:00:02.900 --> 00:00:05.371 And we're going to learn how to use it for Firefox development. 00:00:05.371 --> 00:00:09.566 DOM stands for Document Object Model 00:00:09.566 --> 00:00:15.400 And it's basically just an in memory representation, it's a tree structure, of a web page or XML document. 00:00:15.400 --> 00:00:19.150 It also provides an API to work with that in memory representation. 00:00:19.150 --> 00:00:24.370 You might have guessed but the DOM Inspector allows you to basically inspect the DOM. 00:00:24.370 --> 00:00:27.637 You can also do a lot of things like manipulate it as well. 00:00:27.637 --> 00:00:32.270 At the time of this video, there's actually a built in Firefox tool called the Inspector. 00:00:32.270 --> 00:00:38.067 I'm just going to show you how that works, you can right click for example on anything on a web page. 00:00:38.067 --> 00:00:40.317 And you can select Inspect Element 00:00:40.317 --> 00:00:42.771 And that'll bring in the inspector right there. 00:00:42.771 --> 00:00:47.233 And this shows you the in memory representation of the web page. 00:00:47.233 --> 00:00:51.470 And you can expand it for example, you can see things there. 00:00:51.470 --> 00:00:59.317 You can even for example double click on the text, and change it... there you go. 00:00:59.317 --> 00:01:01.566 You can see that it updates live right there. 00:01:01.566 --> 00:01:07.036 But this inspector tool can't be used for Firefox development. 00:01:07.036 --> 00:01:11.937 So what we're going to use instead is use the tool that was built before this Inspector tool was available. 00:01:11.937 --> 00:01:13.703 Called the DOM Inspector. 00:01:13.703 --> 00:01:14.900 And it's an extension. 00:01:14.900 --> 00:01:19.566 So to install that extension, I'm just going to type inside here. 00:01:19.566 --> 00:01:26.650 DOM Inspector Firefox extension, hit enter. 00:01:26.650 --> 00:01:31.732 And I can actually close the Inspector now. 00:01:31.732 --> 00:01:35.150 And you'll see it right here as the first result. 00:01:35.150 --> 00:01:36.567 I'm going to click that. 00:01:36.567 --> 00:01:41.037 And I'm just going to click on Add to Firefox. 00:01:41.037 --> 00:01:48.483 And click on Install Now. 00:01:48.483 --> 00:01:53.983 And this extension needs to be restarted so I'm going to click on Restart Now. 00:01:53.983 --> 00:01:59.650 Alright we're back there now. 00:01:59.650 --> 00:02:03.704 Now to access it, I can just hold down the Alt key. 00:02:03.704 --> 00:02:08.636 Go to the Tools menu here, Web Developer. 00:02:08.636 --> 00:02:10.482 And go to DOM Inspector. 00:02:10.482 --> 00:02:14.816 And it brings up this second window right here. 00:02:14.816 --> 00:02:22.731 Now you can use this DOM Inspector for both modifying content and Firefox development. 00:02:22.731 --> 00:02:30.470 But I only recommend to use it for Firefox development, and I recommend to use the built in Inspector tool for content. 00:02:30.470 --> 00:02:33.770 So we're just going to go through the menus here. 00:02:33.770 --> 00:02:39.400 In the File menu, if you go to Inspect, you can see that it says Inspect a Content Document, 00:02:39.400 --> 00:02:42.817 and that shows the currently loaded content documents that I have. 00:02:42.817 --> 00:02:45.272 Or you can Inspect a chrome document. 00:02:45.272 --> 00:02:48.371 And that's basically Firefox itself. 00:02:48.371 --> 00:02:52.804 So I'm just going to go to the first item here. 00:02:52.804 --> 00:02:55.149 Inspect Firefox window itself. 00:02:55.149 --> 00:03:03.438 And you can see that it's loading up the browser/content/browser.xul 00:03:03.438 --> 00:03:07.150 And that's the XUL document for the main window itself. 00:03:07.150 --> 00:03:11.771 Again you can see that there's different stylesheets here, I can actually click on them. 00:03:11.771 --> 00:03:15.068 And if I wanted to I could actually: delete, delete, delete... 00:03:15.068 --> 00:03:18.148 You can see the style being removed in the background window right there. 00:03:18.148 --> 00:03:19.338 As I do that. 00:03:19.338 --> 00:03:21.733 And I can also Undo to get them back. 00:03:21.733 --> 00:03:25.671 You can look through the actual DOM as well. 00:03:25.671 --> 00:03:29.650 So I'm expanding window, it shows that there is a bunch of scripts there. 00:03:29.650 --> 00:03:33.438 And each of these things you can click on, you can delete, or you can modify. 00:03:33.438 --> 00:03:39.566 Now a handy feature of the DOM Inspector is this little click to find element feature. 00:03:39.566 --> 00:03:44.437 So for example in past videos, we modified the URL bar to have a red color. 00:03:44.437 --> 00:03:48.938 How I found the ID of that URL bar, is by clicking this button right here. 00:03:48.938 --> 00:03:52.036 Find a node, inspect by clicking it. 00:03:52.036 --> 00:03:58.204 And then you go ahead and select the thing that you're interested in finding out the ID of. 00:03:58.204 --> 00:04:00.233 So I'm going to click on the URL bar right there. 00:04:00.233 --> 00:04:04.801 And it selected red for a second. 00:04:04.801 --> 00:04:07.233 I'm going to go back to this. 00:04:07.233 --> 00:04:12.150 Now it found this item down here, urlbar. Usually it'll have some red things. 00:04:12.150 --> 00:04:14.649 Usually you want the parent of the red thing. 00:04:14.649 --> 00:04:18.003 The red is an anonymous content node, and we'll get into that later. 00:04:18.003 --> 00:04:21.270 But you usually want the first parent above the red stuff. 00:04:21.270 --> 00:04:27.567 So you can see that the ID column right here, shows that the ID of the text box right there is the URL bar. 00:04:27.567 --> 00:04:30.436 And that flashing red is not something that I added with the video. 00:04:30.436 --> 00:04:32.304 It's actually part of the DOM Inspector itself. 00:04:32.304 --> 00:04:37.067 So on the right here, you can see the DOM object node. 00:04:37.067 --> 00:04:38.983 ... for the text box URL bar. 00:04:38.983 --> 00:04:41.105 And you can see all the properties of it. 00:04:41.105 --> 00:04:46.567 Like the ID, the flex, the type, etc. 00:04:46.567 --> 00:04:49.316 Any attribute of that DOM element will show up there. 00:04:49.316 --> 00:04:55.065 You can also go ahead and double click an item. 00:04:55.065 --> 00:04:57.650 And you can actually modify the value on the fly as well. 00:04:57.650 --> 00:05:06.233 So you can see how making changes fast would be a lot faster than modifying the source code and compiling it and then opening it. 00:05:06.233 --> 00:05:13.067 So I'm just going to hit cancel, and I'm going to go here into this menu. 00:05:13.067 --> 00:05:15.566 And you can see a bunch of different things you can do. 00:05:15.566 --> 00:05:21.399 Box model, that'll show you just the positioning, dimensions, margin, border, etc. 00:05:21.399 --> 00:05:26.983 You can go to XBL bindings, we'll get into XBL in a future video, 00:05:26.983 --> 00:05:31.771 But basically you can see attached attributes and functions. 00:05:31.771 --> 00:05:35.733 An important one that you'll probably use is the CSS rules. 00:05:35.733 --> 00:05:42.205 So you'll see for this element you'll see all the stylesheets and all the rules that apply. 00:05:42.205 --> 00:05:47.817 And it shows the file of where the rule is. 00:05:47.817 --> 00:05:53.167 So if you're just finding out, you want to add style to the URL bar, and you want to know where you should add it. 00:05:53.167 --> 00:05:59.416 A good place to start is the DOM Inspector, to inspect it, and then you can for example click on each one of these and see what each one is doing. 00:05:59.416 --> 00:06:03.500 You can also right click on this bottom pane right here. 00:06:03.500 --> 00:06:05.871 And you can go to insert. 00:06:05.871 --> 00:06:10.369 And you can add a property, for example background-color. 00:06:10.369 --> 00:06:13.136 And you can set the value to red. 00:06:13.136 --> 00:06:17.918 And you can see that up here, it applied the URL bar red change. 00:06:17.918 --> 00:06:26.084 All of these CSS rules, might be confusing, so you can click here again and you can go to computed style. 00:06:26.084 --> 00:06:29.167 And that'll show you the overall, what's taking effect. 00:06:29.167 --> 00:06:33.001 And you can scroll through it. 00:06:33.001 --> 00:06:36.605 So a couple more things in that menu. 00:06:36.605 --> 00:06:41.703 You can have used font faces, and JavaScript Objects. 00:06:41.703 --> 00:06:48.138 So if you want to see the JavaScript object for that DOM element itself, you can click there, and you can see all the properties of that. 00:06:48.138 --> 00:06:50.333 And you can also expand them on the fly too. 00:06:50.333 --> 00:06:56.916 So if you're for example coding something, and you're using that element. 00:06:56.916 --> 00:06:58.872 And you're not sure what the functions are. 00:06:58.872 --> 00:07:02.904 You can just use the DOM Inspector, and you can see which function you should call there. 00:07:02.904 --> 00:07:08.250 So that just covered some of the really basic functionality of the DOM Inspector. 00:07:08.250 --> 00:07:12.235 As you can see it's an extremely useful tool for productivity. 00:07:12.235 --> 00:07:16.583 Trying to do something without the DOM Inspector is usually really, really hard. 00:07:16.583 --> 00:07:20.167 And you can actually see what's going on under the hood with the DOM Inspector. 00:07:20.167 --> 00:07:23.000 So I highly recommend to learn it, and use it. 00:07:23.000 --> 00:07:25.083 And that's all for this video.