Chrome’s Dev Tools are a simple F12 keyboard click away (or Cmd + Opt + I on Mac). The Dev Tools panel slides into view below the page you’re viewing, opening a wide variety of useful tools for WordPress developers. Here are just a few that I find handy when working on WordPress themes.
Using Chrome’s Dev Tools to Change CSS
When you edit the CSS of the page using Chrome’s Dev Tools, you can easily change the way the page looks without any commitments – a simple refresh clears your edits. When you like what you’ve done, you can simply copy your CSS edits and add them to your child theme’s stylesheet:
If you’re developing a one-page lander, you might want to use inline styles. All you need to do is to take an HTML template, hack up the CSS how you like it and dump the resulting HTML into a page builder like Beaver. To get the CSS and HTML of the page you’re editing, simply enter into Google Chrome’s Dev Console:
//prints the content of the page: console.log(document.getElementsByTagName('html').outerHTML); //copies the contents of your edited page to the copy buffer copy(document.getElementsByTagName('html').outerHTML);
If you need to do a ‘diff’ to see what’s changed, you can use Meld (free download) or the online tool Mergely. Remember that copying the after-state of your DOM post-edits only works with the merge technique if you’re editing inline CSS. It won’t work if you’re tinkering with the CSS directives in your stylesheet.
Seeing Your Changes in Real Time
There are a few things that open up when Chrome’s Dev Tools are active:
1. When you drag your browser window, you can see the exact dimensions of the page in the upper right. This is very useful for setting your media query break points:
2. Reload and clear cache. When developing a child theme, you might resort to using wp_enqueue_script and setting version numbers for your child sheet to make sure WordPress reloads your edits:
When Dev Tools is open, holding down the “Refresh” icon now gives you two other options:
You can also make this choice permanent by going into the Dev Tools settings (shortcut key: F1) and ticking “Disable cache (while DevTools is open)” in the Network section.