Accessing the Inspect Tool

The Inspect tool can be found in Chrome’s context menu. Right click on any element in your browser and click on “Inspect” in the context menu.

A window will pop out of the side of the Chrome browser as seen below. This is called the DevTools panel. If you’ve ever used Firebug on Firefox, you might recognize some parts of it.

There’s a lot here, so let’s examine the individual pieces.

Inspecting the Inspector

The inspect panel is divided into several different tabs which are visible at the top of the window. We’ll focus on the default Elements tab.

There are two useful buttons next to these tabs. The first is the Inspect Element tool.

This tool allows you to mouse over and select different DOM elements to inspect.

The second button turns on Device Preview mode. In this mode you can see what your webpage looks like at different resolutions and screen sizes.

If you click on that button, you’ll see your webpage snap into a new view.

You can then use the drop-down menu above the page preview or the handles on the sides of the page preview to resize the device preview window.

HTML View

Most of the DevTools tab is occupied by the HTML pane.

This pane is like a super-powered “View Source.” It’s structured according to the DOM, with elements nested inside their parent elements. You’ll see that the element you “inspected” at the beginning is automatically highlighted with a grey or blue background. Here, I’ve inspected an image which is contained in a link. As expected, I see a highlighted anchor tag.

But where’s my image? I can reveal any DOM elements nested in the anchor tag by clicking the disclosure triangle next to the . In this case the arrow reveals the  tag I expected to find.

You’ll also notice a small menu bar at the bottom of the HTML pane.

This is called the breadcrumb trail, and it shows you all the parent elements of the selected element. To navigate to one of those elements, simply click it.

Styles

Underneath the HTML view we also see a pane that shows any CSS rules that apply to our element. This is called the Styles pane, and in this case we see all the rules that apply to the anchor tag I inspected earlier.

You can toggle a rule on and off by hovering over it and clicking the check box next to it.

You’ll see this change reflected in the page preview immediately. And if you click directly on a rule, you can change its name and value.

You can also search for particular rules using the Filter search box.

The Styles pane is capable of much more than just that, however. Check out Google’s documentation for a full explanation of the Style pane’s many functions.

Box Model and Computed Style

Next to the style view is the box model for my selected element. If you’re not familiar, the box model is an abstracted depiction of the margin, border, padding, and content size applied to a particular element.

In this case I can see my element has a primary size of 461 x 209 pixels. It contains no margin, border, or padding rules, so those boxes are blank. If you do choose an element with some position, margin, border, or padding rules, your box model might look more like this.

You can also see an in situ box model if you mouse over DOM elements with the Inspect Element tool enabled.

Below the box model is a list of all the styling rules that apply to this particular element. This is slightly different form the Styles pane. It doesn’t display the actual lines of CSS – only the effects of those rules. This is called the “computed style” of the object, and it’s the combined result of your CSS.

Finally, you can search for particular rules by typing in the Filter box.

Conclusion

If you work with web pages frequently, Chrome’s Inspect tool is well worth exploring. And the other tabs in DevTools, like Console and Network, can be invaluable for developers. There’s more to that than we can cover right now, but Google’s own documentation is thorough and useful.