Just One Reason Why Chrome's Developer Tools Are The Cat's Pajamas

By Rob Gravelle

Just One Reason Why Chrome's Developer Tools Are The Cat's Pajamas

11/12/13

There was a time not so long ago that Internet Explorer was the number one browser. Its domination of the browser world was perhaps fueled by its inclusion in Windows operating systems. So strong was its hold on market share that competitors were quickly struck down into the dust from whence they came (remember Netscape?). Those days are over. Today's browser of choice by a country mile is Google Chrome. It claimed a comfortable margin over 50% of market share for 2013 so far, according to www3school's Browser Statistics Page. There are many reasons that it's so popular, but one of the biggest in my opinion is its superlative development tools. In today's article, we'll be taking a look at the Elements and Styles windows and getting a first-hand view as to how they help make Chrome's development tools the cat's pajamas!

Dev Tools Overview

The Developer Tools are accessible from the Options button in the top-right corner of the browser under Tools > Developer tools. There is also the very intuitive Ctrl+Shift+I shortcut if you like.

By default, that will open the tools at the bottom of the browser window. Don't like the reduction in screen real estate? You can unlock the tools into a separate window by clicking on the "Unlock into separate Window" button at the very bottom-left of the browser window:

The Developer Tools are divided into eight different components, accessible in the top-left of the Developer Tools window: Elements, Resources, Network, Sources, Timeline, Profile, Audits, and Console. Though they may not look it, each label is actually a toggle button so that clicking on a word will configure the Dev Tools window for that particular component.

It would take a whole lot more than one article to elaborate on what each component does, but today we will get a feel for the Element and Styles windows and how they contribute to setting Chrome apart from other browsers.

Inspecting Page Elements

Pretty much all browsers allow you to view the page source, usually by right-clicking anywhere in the document and selecting the "View page source" options from the popup menu. Unless the page you're looking at is fairly small, there isn't a whole lot to be gained by sifting through the document source. The "Inspect element" is a far more useful command. Right-clicking on a specific element and selecting "Inspect element" from the popup menu goes right to that element in the Elements Developer Tools pane. Moreover, hovering the mousepointer over an element in the Developer Tools pane highlights the element in the actual document, showing its boundaries (in blue) as well as its margin (in peachy orange). Heck, it even displays its tag, ID or class, and dimensions in a tooltip:

Even better than viewing an individual element's source code is the ability to modify it on the fly. In Chrome, just about anything you see in the source can be edited to try out your changes before applying them to the actual document or associated files. For instance, any element attributes can be altered by simply double clicking it in the Elements pane:

When it comes to the style attribute, there's a better way to edit those. On the right of the Elements pane, there are several more tabs. The first one, "Styles", is where you can view, edit, remove and/or add CSS rules and attributes. The top rule, called "element.style", maps to the element's style attribute in the HTML tag. Simply clicking in front of the opening curly brace ({) displays the rule editor so that you can add a new attribute. As you type, changes are reflected in the source and document in real time!

Where ever possible, rule attributes can be disabled by clicking on the checkbox on the attribute's left.

The source of external rules can be tracked down via the link on the right of the rule. Believe me, the more CSS stylesheets a document has, the more you'll appreciate this feature!

There are some buttons in the top right corner of the Styles tab worth pointing out. The plus sign adds a new rule. The box with the mousepointer in front of it is the "Toggle Element State" button. It allows you to simulate an element's active, focus, hover and visited states. The last button lets you convert between Hex, RGB, and HSL colors:

An element's HTML source can be modified by selecting it in the Elements pane and choosing "Edit as HTML" from the popup menu:

Examining Element Size Information

An element's true space requirements on the page are not determined solely by its width and height properties. There are other factors to consider, including its padding, border, and margins. Since CSS allows for sizing each side individually, it can be difficult to tell where one element ends and the next one begins! At the bottom of the Styles page, there is a diagram that illustrates very clearly the selected element's spacing properties. Numbers are included for all four sides of the element, along with color-coded layers that show each section. Moreover, hovering the mousepointer over a given section highlights the actual real estate that each property consumes in the document: