I’m not sure how I could work without Chrome Developer Tools. When I do front-end development on WordPress sites, I use it absolutely all day long, and it saves me hours every day relative to working without it.

So here’s a short rundown of what DevTools is, its basic features, and some of the ways I’ve found to use it in a WordPress context. If you’re an experienced developer, you likely already know some of these features—but if you don’t, it’s the sort of thing that takes web development from impossible to possible. And it’s very likely that you’ll learn something about DevTools even if you already use it.

A quick note on browsers: This article focuses on Chrome Developer Tools, because it’s my favorite tool, and Chrome is my favorite browser. If you don’t like Chrome, Firefox has a very similar tool called Page Inspector. It even has a few features that Developer Tools doesn’t, like a font viewer (at right). However, I find that the Firefox version has a worse user interface. A Firefox add-on called Firebug also predates Developer Tools, but also suffers from an inferior UI. Internet Explorer has attempted a similar tool, but the tool—like IE itself—is Voldemort.

What Developer Tools is

The Elements panel of the Developer Tools interface. (Click to enlarge.)

Developer Tools is a software package that comes bundled with Google Chrome, and makes it easy to analyze the structure, markup, and resources of any webpage. It’s available from any browser tab; to use it, just right-click anywhere on a page and click “Inspect element.”

The main DevTools feature we’ll be focusing on here, which is also the first tab you see by default, is the Elements panel, a DOM inspector and CSS style viewer. Before we get to that, though, a few other features are worth mentioning:

• The Sources panel, a JavaScript debugger, and the JavaScript console
• The Resources panel, which lets you view information about the resources that make up a page, such as all images and their file sizes
• The Timeline panel, which helps you understand site performance and break down page load time into its component parts

Reading the documentation for these features is very worth your time. However, here we’re just going to cover HTML/CSS editing through the Elements panel.

What the Elements panel empowers you to do

The Elements panel lets you browse the HTML structure of the page you’re on, and to see all the CSS rules that make each element look the way it does. My hundreds of hours of time savings have mostly come from its core features, which make several really important things possible.

Visualize the HTML page structure as the browser sees it.

This basic feature is especially important in WordPress, where I often need to confirm that the PHP templates I use are bug-free and fit together properly.

The “Elements” panel presents the page’s HTML document object model (DOM), as interpreted by your browser. Every element that Chrome knows about gets displayed here, nested in the proper hierarchy. You can also open and close any container element for easy browsing.

This basic feature is especially important in WordPress, where I often need to confirm that the PHP templates I use are bug-free and fit together properly. If I suspect that one of my templates has a missing or duplicate div, or if I just want to know if everything’s in the right place, this is how I find out.

You can view source, but can you understand source?

The only other close-at-hand way to browse the DOM is through “View page source,” which makes no attempt to format elements or to convey their relationships with one another. I doubt I could work effectively without a comprehensible map of the DOM to browse.

Understand what CSS rules apply to each element, and what other elements they apply to.

When you work on WordPress projects, you’re often overwriting a parent stylesheet (either using a child theme or a custom CSS plugin) while leaving the parent styling intact. As a result, just about every element you touch is usually heavily marked-up already—and so, if you start blindly making CSS changes, they won’t work. They’ll either be overridden by other styles, break other styles, or fail to apply across all the elements you meant to style.

DevTools exposing CSS rules with high specificity (top) and breadth (bottom).

DevTools and its off-browser counterparts are the only tool I’m aware of that lets you quickly understand the way a page’s CSS maps onto its elements. They reveal exactly the degree of both specificity and breadth that a style declaration carries, allowing you to write your own styles accordingly. (More on doing this properly in an upcoming post!)

DevTools also lets you know what earlier style declarations have been overwritten—including ones you made that were overruled by more specific parent styles—and even to examine the behavior of :hover and other pseudo-selectors.

Edit the page’s DOM, CSS, and content on the fly for quick iteration

The DevTools Elements panel is fully editable. You can type into the DOM part of it just like you would an HTML document, and into the CSS part just like you would a CSS stylesheet. Your changes will persist until you close or reload the browser tab you’re working in.

If you’re HTML- and CSS-proficient, DevTools is essentially a WYSIWYG editor that works perfectly.

You can do just about anything on here: delete elements, duplicate them, change class and ID selectors, modify content—even dynamically pull in image resources hosted elsewhere. The results will instantly display in your browser. If you’re HTML- and CSS-proficient, DevTools is essentially a WYSIWYG editor that works perfectly (contrast: the WordPress admin) because you’re editing directly in the browser itself.

Dynamically loading an external image onto a page

For WordPress developers, working inside DevTools cuts out a huge amount of time making changes to theme files and/or the admin, and then refreshing to see if they worked. Make all the changes you want directly in your browser, and when everything looks like you want it to, just paste into your CSS, template files, or admin. (Just remember not to reload the page in the meantime.)

Some specific use cases

Below are some ways I’ve learned to use DevTools. They all follow directly from the features presented above, but each of them took a while to occur to me.

Quickly generate and compare page versions.

If you’re wondering whether you (or your client) would prefer a green or a blue site background, simply change the CSS style that controls page background and take a screenshot. Paste the screenshot into MS Paint (or whatever Apple has), then change the style again and take another screenshot. Or open two browser tabs and flip back and forth. Once you get good at it, generating and comparing multiple page versions this way is almost instantaneous.

Test element styling with different amounts of content.

Testing the limits of our nav menu in DevTools

You can extend the length of a piece of text arbitrarily by repeatedly copying and pasting inside its HTML element. You can also remove an element’s text content entirely. As HTML elements tend to break with too much or too little content, this is a great way to test the limits of a layout you’re working on, or of a theme you’re thinking about buying.

Look under the hood before you buy a theme.

On that note, DevTools is a great way to check out a theme you’re thinking about buying. Commercial themes tend to be full of surprises: weird interfaces, gnarled PHP templates, and theme options that are incomplete, bizarre, or both.

There’s no easy way to solve all these problems, but using DevTools to take a good, close look at a theme’s demo site can at least give you a preliminary sense of how it’s put together. Do the CSS rules seem sane, or are they an unnecessary tangle of conflicting declarations? How bulky is the HTML that generates the page? Would the theme look good if you got rid of all the blank space above the header? How about if you set the responsive breakpoints differently? How would it look if the text inside links (and only inside links) was in a serif font? On that note, DevTools is a great way Kick the tires a bit, because you can.

Browse other sites and see how they’re styling the things you like.

So that’s how they did it!

This is a big one! Beautiful design doesn’t have to be out-of-reach. If you find an element you love, DevTools can take you directly to the styling that generated it. I’ve consistently expanded my CSS horizons this way—it’s a bit like looking at a painting and being able to understand each brushstroke.

These are just some of the ways I’ve learned to use DevTools. I’m sure you have your own. We’d love to read about them in the comments below!

In conclusion…

There’s no reason to attempt to build websites, particularly WordPress sites, without DevTools (or its cousins in other browsers). If you’ve been getting into development and haven’t been using DevTools at all, or not to its fullest, take a bit of time to get familiar with it. You’ll be happy you did, because it’s one of the most massively useful parts of the developer’s toolkit.