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