Handy WordPress Web Developer Extensions & Tools in 2022
When it comes to making your life easier as a WordPress web developer, browser extensions and tools are low-hanging fruit. They’re generally easy to install, fairly user-friendly, and great at saving you time & headaches during the development process.
Instead of trying to write an exhaustive list of all the browser tools and web developer extensions out there, we’re just going to focus on the ones our team at The Events Calendar uses regularly in their work.
Basic Browser Dev Tools
Before we get to the browser extensions, here’s a quick list of WordPress developer tools available for some of the most common web browsers.
Chrome DevTools
Google Chrome offers several built-in web authoring and debugging tools useful for web developers. To access DevTools, select More Tools > Developer Tools from the Chrome menu.
Safari Developer Tools
Apple users running Safari can access their Safari Developer Tools, including the Web Inspector tool that allows you to modify, debug, and optimize websites for both OS X and iOS platforms. These tools can be accessed by enabling the Develop menu within Safari’s Advanced preferences.
Firefox Developer Edition
Mozilla offers a developer edition of their popular Firefox browser, including plenty of features and experimental developer tools.
Opera DevTools
Opera updates its dev tools site a few times per week. Their dev tools site includes resources for extensions, simulators, emulators, and upcoming local events.
Useful Developer Extensions
And now on to the fun part – extensions that make your browser more useful for development and troubleshooting tasks. Some of our team’s favorites:
React Developer Tools
React Developer Tools is an extension for Chrome DevTools that allows you to inspect React component hierarchies, as well as how root React components render on the page.
Eye Dropper
Eye Dropper is an open source Chrome extension that allows you to pick colors from web pages or their advanced color picker and store it in your history for future use. The history feature on this extension can be useful, but if you’re just looking for quick color info, the default eye dropper tool that’s built into Chrome DevTools will also do the trick.
Page Ruler
The name gives it away – the Page Ruler browser extension for Chrome lets you draw a ruler to get pixel dimensions and measure elements on a web page.
Full Page Screen Capture
Another extension named for exactly what it does. The Full Page Screen Capture browser extension for Chrome allows you to capture the full content of a web page and turn it into an image.
My Style
The My Style browser extension for Chrome allows you to insert custom CSS into pages, see the visual results immediately, and store the data to apply the CSS to future visits to that site.
AdBlock
AdBlock does just that – blocks annoying ads from intruding on your web browsing experience. Most ads aren’t downloaded at all, speeding up your browsing experience. AdBlock is available for Chrome, Safari, Opera, and iPhone, and is particularly useful for troubleshooting purposes when you need to kill off the loading of scripts/styles on a site you don’t directly control.
uBlock
uBlock is an open-source ad blocker available for Firefox and Chrome. In addition to blocking ads, it can also read and create filters from host files. It’s generally easy and efficient, and also has useful features like preloaded filters for spam/malware domains.
Tampermonkey
Tampermonkey is a userscript manager that works with Google Chrome and Opera to allow you to inject JavaScript into web pages you load in your browser. It is very similar to the Greasemonkey add-on for Firefox.
Lazarus: Form Recovery
Last but most certainly not least on our list is the Lazarus: Form Recovery browser extension for Firefox and Chrome. You know how you can be typing up a long forum reply or comment and then the browser crashes or your computer acts dumb or somehow all your writing is lost?
Lazarus will have it auto-saved for ya. It’s amazing.
There you have it – 13 of our favorite WordPress developer extensions and tools. Hope these help to make your WordPress developer life a bit easier.