Why Chrome Developer Tools is Every WordPress Developer’s Best Friend

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

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.