Introduction to the DOM Inspector

Firefox development tutorial for using the DOM Inspector to inspect chrome documents.
http://codefirefox.com

In this video we're going to learn about the DOM Inspector.

And we're going to learn how to use it for Firefox development.

DOM stands for Document Object Model

And it's basically just an in memory representation, it's a tree structure, of a web page or XML document.

It also provides an API to work with that in memory representation.

You might have guessed but the DOM Inspector allows you to basically inspect the DOM.

You can also do a lot of things like manipulate it as well.

At the time of this video, there's actually a built in Firefox tool called the Inspector.

I'm just going to show you how that works, you can right click for example on anything on a web page.

And you can select Inspect Element

And that'll bring in the inspector right there.

And this shows you the in memory representation of the web page.

And you can expand it for example, you can see things there.

You can even for example double click on the text, and change it... there you go.

You can see that it updates live right there.

But this inspector tool can't be used for Firefox development.

So what we're going to use instead is use the tool that was built before this Inspector tool was available.

Called the DOM Inspector.

And it's an extension.

So to install that extension, I'm just going to type inside here.

DOM Inspector Firefox extension, hit enter.

And I can actually close the Inspector now.

And you'll see it right here as the first result.

I'm going to click that.

And I'm just going to click on Add to Firefox.

And click on Install Now.

And this extension needs to be restarted so I'm going to click on Restart Now.

Alright we're back there now.

Now to access it, I can just hold down the Alt key.

Go to the Tools menu here, Web Developer.

And go to DOM Inspector.

And it brings up this second window right here.

Now you can use this DOM Inspector for both modifying content and Firefox development.

But I only recommend to use it for Firefox development, and I recommend to use the built in Inspector tool for content.

So we're just going to go through the menus here.

In the File menu, if you go to Inspect, you can see that it says Inspect a Content Document,

and that shows the currently loaded content documents that I have.

Or you can Inspect a chrome document.

And that's basically Firefox itself.

So I'm just going to go to the first item here.

Inspect Firefox window itself.

And you can see that it's loading up the browser/content/browser.xul

And that's the XUL document for the main window itself.

Again you can see that there's different stylesheets here, I can actually click on them.

And if I wanted to I could actually: delete, delete, delete...

You can see the style being removed in the background window right there.

As I do that.

And I can also Undo to get them back.

You can look through the actual DOM as well.

So I'm expanding window, it shows that there is a bunch of scripts there.

And each of these things you can click on, you can delete, or you can modify.

Now a handy feature of the DOM Inspector is this little click to find element feature.

So for example in past videos, we modified the URL bar to have a red color.

How I found the ID of that URL bar, is by clicking this button right here.

Find a node, inspect by clicking it.

And then you go ahead and select the thing that you're interested in finding out the ID of.

So I'm going to click on the URL bar right there.

And it selected red for a second.

I'm going to go back to this.

Now it found this item down here, urlbar. Usually it'll have some red things.

Usually you want the parent of the red thing.

The red is an anonymous content node, and we'll get into that later.

But you usually want the first parent above the red stuff.

So you can see that the ID column right here, shows that the ID of the text box right there is the URL bar.

And that flashing red is not something that I added with the video.

It's actually part of the DOM Inspector itself.

So on the right here, you can see the DOM object node.

... for the text box URL bar.

And you can see all the properties of it.

Like the ID, the flex, the type, etc.

Any attribute of that DOM element will show up there.

You can also go ahead and double click an item.

And you can actually modify the value on the fly as well.

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.

So I'm just going to hit cancel, and I'm going to go here into this menu.

And you can see a bunch of different things you can do.

Box model, that'll show you just the positioning, dimensions, margin, border, etc.

You can go to XBL bindings, we'll get into XBL in a future video,

But basically you can see attached attributes and functions.

An important one that you'll probably use is the CSS rules.

So you'll see for this element you'll see all the stylesheets and all the rules that apply.

And it shows the file of where the rule is.

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.

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.

You can also right click on this bottom pane right here.

And you can go to insert.

And you can add a property, for example background-color.

And you can set the value to red.

And you can see that up here, it applied the URL bar red change.

All of these CSS rules, might be confusing, so you can click here again and you can go to computed style.

And that'll show you the overall, what's taking effect.

And you can scroll through it.

So a couple more things in that menu.

You can have used font faces, and JavaScript Objects.

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.

And you can also expand them on the fly too.

So if you're for example coding something, and you're using that element.

And you're not sure what the functions are.

You can just use the DOM Inspector, and you can see which function you should call there.

So that just covered some of the really basic functionality of the DOM Inspector.

As you can see it's an extremely useful tool for productivity.

Trying to do something without the DOM Inspector is usually really, really hard.

And you can actually see what's going on under the hood with the DOM Inspector.

So I highly recommend to learn it, and use it.

And that's all for this video.