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.

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