Skip to content

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.

firefox-fontsA 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

devtools-dom-inspector
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.

Yay! 🎉 You made it to the end of the article!
Fred Meyer
Share:

4 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
Tahir Taous
January 25, 2015 1:55 am

I have used Firefox and Chrome Dev Tools for editing CSS but Chrome Dev Tools now offer much more than simple CSS editing. You can even edit PHP files and no need to copy code from dev tools, open your Theme’s file in Text editor and paste code thre to save changes.
With Chrome workspaces feature you can develop or edit theme’s with chrome dev tools and chrome will save your changes directly no more copy pasting.

Good Sites Gone Sans - Press Up
October 1, 2014 5:46 pm

[…] logos). However, you can get most of the way there just by changing text content, which you do by opening your browser’s responsive inspector and entering the following as a new […]

Why I Wish I'd First Learned Programming in Sass | Press Up
July 2, 2014 3:47 pm

[…] you can view the exact runtime output of your Sass code as a CSS file, and explore it using a browser explorer (or a hack I’ve described […]

How to Change the CSS of a WordPress Theme (and Not Go Crazy) | WPShout.com
May 6, 2014 12:08 pm

[…] Using Chrome Developer Tools (the “Inspect element” option when you right-click in Chrome), or a similar tool in another browser. […]

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!