The Best Google Chrome Extensions For Every WordPress Web Developer
Google Chrome wasn’t the first web browser to enter the arena, yet despite a growing number of competitors over the years, it continues to hold the title of most popular.
Since arriving on the scene in 2008, Chrome steadily closed ranks, then easily surpassed the once-dominant Mozilla Firefox and Microsoft Internet Explorer (the latter of which had upwards of 90% market share in its heyday).
Even diehard Foxophiles and Gate(s)keepers―currently retaining barely 5% of the browser market combined―have long since switched to the metallic maven. Whether surfing from a desktop or a mobile device, Chrome is definitively the most-used browser in pretty much any country.
As a web developer, you want to be sure that what you’ve designed is able to adapt to any device or browser. Google Chrome, as the most used browser, should be at the top of that list.
Aside from using Chrome as part of your browser testing, it’s also helpful in terms of the tools (or extensions) that were specifically created for web developers.
To that end, we’ve put together a handy list of Chrome web developer extensions that we feel really pass the muster. Keep reading to find out what they are, or use the jump links below to go to any section.
And off we go…
Developers Paradise
Aside from using Chrome as part of your browser testing, it’s also helpful in terms of the tools/extensions that were specifically created with Chrome web developers in mind.
WordPress devs know how powerful the CMS is on its own, but you can make your development workflow even more efficient directly from your Chrome browser with some sweet extensions.
Chrome makes easy work of this with one-click installs (or uninstalls, for any you decide not to use). You can also pin any in the browser bar for quick and easy access.
So let’s get started, and delve into the best Google Chrome extensions for web developers.
Blogging and Writing
If you’ve ever been bothered by the WordPress admin bar that appears when you try to view your site’s front end (sometimes it blocks important components of your site that you want to be able to view while you’re previewing posts), we feel you.
This extension does one simple thing, but it does it well. You can hide the admin bar when you click its icon next to your address bar. It’s a super speedy way to see what you’re missing without having to resort to logging out or opening an incognito window.
Don’t let the lack of recent updates scare you away. It does exactly what it’s supposed to, and as the saying goes… if it ain’t broke, don’t fix it.
This Chrome Extension will store your WordPress site information and allow quick and easy access to your site’s main pages. It also provides more functionality to the WordPress theme editor by turning it into a CodeMirror editor.
Once you enter your login information once, you can access your stored sites with the WordPress Site Manager extension. You can edit main pages, add sites to your network, make adjustments to your theme and other basic changes.
All the available changes are neatly organized on the page to make quick work of edits and amendments.
Grammarly is one extension we’re hooked on. Not only does it accurately help you identify spelling mistakes (with a red underline), it also points out grammatical ones (with a green underline).
The most helpful feature is how it conveniently displays correction suggestions when you hover over the word in question. Just click on the suggestion you want to use, and it automatically replaces the original text or punctuation.
It doesn’t just work for WordPress posts, either. It works anywhere you can input text so improving your copy, pages, products, and even your emails is a breeze.
There is a premium subscription available that extends outside of Chrome if you would like access to advanced corrections and writing improvements.
Styling and Design
Have you ever gone to a site where you were instantly drawn to the shade palette? ColorZilla makes it really easy to find the hexadecimal code for any color on the site you’re currently visiting.
With over 5 million downloads and 1.3 million users, ColorZilla is one of the most popular Google Chrome extensions available. Despite no updates since 2016, it still works like a champ.
All you have to do is grab the eyedropper icon, hover over the color, then click on it to generate a color code.
ColorZilla features a multitude of color tools for just about any needs you may have, including an eyedropper, color picker, palette viewer, and a gradient generator.
Fonts Ninja identifies fonts from any website, so you don’t pull your hair out thinking, WTF? (“What’s that font?” 😊)
They have a proprietary algorithm that analyzes font files to get more accurate results, and recent updates have dramatically improved the processing speed as well.
Rollover any text to get the font name and CSS properties. The main extension window will also display a summary of all fonts used on a website. You can also get more information about fonts, such as how many styles are available, their foundry, and price (if available for purchase).
You can even bookmark fonts, and manage them within the extension.
A premium version is available. It allows macOS/windows apps to install trial versions of fonts you discover on websites, which you can then use in any software.
QR Code Generator is super handy and highly rated.
It converts your current page into a QR Code with one quick click. You can generate QR Codes from free text and URLs on the fly.
Key features include automatic Dark mode, the ability to download the QR code as an image, the ability to create a custom QR code with logo, hotkey support, and more.
Because the devs turn the raw URL into a QR code and don’t include any third-party material in it, any QR codes you create are permanently active/never expire. (And more importantly, safe, because they do not track your data or traffic.)
Nimbus Screenshot & Screen Video Recorder is a very helpful, highly versatile tool.
Use Nimbus Capture to take screenshots―full web pages, or any part of the screen. Record videos of your entire desktop or browser tabs, or create videos using your webcam. Use the full suite of editing tools to annotate, crop, add drawings, arrows, stickers, or highlight text.
This extension offers an incredible amount of options. Here are just a few:
- Supports scroll & capture for screenshots
- Record video of another active program, or a video screen from a webcam
- Customize video screen resolution and frame rate
- Trim & crop screenshots and videos
- Share screenshots and get a sharable link to them
- Send screenshots to Slack, or upload to Google Drive and Google Classroom
- Save screenshot captures to a PDF
The free version feels premium, considering all you can do with it. However, they also offer a paid version (around the price of one fancy cup of coffee, per month) which adds even more functionality, such as adding your own watermark, and converting WebM to MP4 and GIF.
Page Ruler Redux is a core web developers extension and designer tool that allows you to get pixel perfect measurements of web elements for website front-end development, web design, or any task you may have that requires exacting pixel measurements.
This extension also allows you to resize the ruler, and adjust color for perfect contrast on dark and light websites.
WordPress Theme Detector and Plugin Detector
WordPress Theme Detector and Plugin Detector can detect installed WordPress Themes and WordPress Plugins on the website you are currently viewing.
This extension is extremely fast because it uses the developers own, server-side API, not your browser.
If you click on Theme Used on / show more from the extensions icon dropdown, you’ll see examples of other websites using the detected theme, including child themes (if there are any).
WordPress Theme Detector and Plugin Detector extension pull together a list of examples (shown above).
Another cool little feature: when using the extension, its icon turns blue if it detects a WordPress site, grey if it doesn’t.
Productivity and Organization
Asana users rejoice. You can now extend the usual functionality of Asana on any Chrome website, further boosting your productivity.
You can add tasks while perusing the web, and even enter the site you’re viewing as a task. That’s not all, either―you can assign team members, workspaces, and descriptions. It’s the perfect tool to help keep you organized and focused on your tasks.
Here’s another reason for you to cheer, that is if you’re an avid Evernote user. With the Evernote Web Clipper extension, you can save entire web pages or simplified clips to your chosen notebooks.
You can also annotate your selection or take a full screenshot. It’s such a great way to keep track of your ideas and inspirations as they happen.
The Toggl Track extension puts a timer into any web tool, allowing quick, real-time productivity tracking, with all the data stored on your Toggl account.
Whether you use Trello, Slack, Asana, Todoist, Jira, Notion, or one of the 100+ integrated tools, start tracking time without opening a new tab. Toggl Track timer can now also fill your Pomodoro needs through automated reminders.
We’ve all been there… you find yourself with too many open tabs, and the jumble becomes confusing, obscures text, and drains memory.
OneTab’s solution? Save up to 95% memory and reduce tab clutter. Simply click the extension icon to convert all of your tabs into a list. When you need to access the tabs again, you can either restore them individually or all at once.
They also provide privacy assurance, stating the information about your tabs is never transmitted or disclosed to the OneTab developers.
With over 800K customers raving about this extension, Hubspot Sales is a widely popular―and quite useful―chrome extension.
Schedule emails, track opens & clicks, log messages from your CRM to Gmail, and share email templates with your team, using Hubspot’s Sales productivity tools. You can also book meetings, which will sync through your Google calendar. It even has mobile apps, for both iOS & Android.
You’ll need an account with Hubspot to use the extension, but it’s free to get one. There is also a paid version, which adds functionality for automated personal outreach, as well as increased limits on templates, meeting scheduling, email tracking, and more.
This particular set of tools comprises the company’s “Sales Hub”. It’s one in a larger suite of CRM platforms that Hubspot divides into categories (such as Marketing, Service, Operations, etc), each with its own integrations and associated fees.
For some great principles, practices, and tips on setting up & using Hubspot, check out these articles from our Member Forum: Why & How to Know If The Email You Sent is Opened, and Use Hubspot’s Email Extension to Increase Your Sales & Improve Processes.
FREE EBOOK
Your step-by-step roadmap to a profitable web dev business. From landing more clients to scaling like crazy.
FREE EBOOK
Plan, build, and launch your next WP site without a hitch. Our checklist makes the process easy and repeatable.
Site Performance
Similarweb is the ultimate competitive digital intelligence tool for a complete 360-degree view of your industry, competitors, and customers.
Access traffic and key metrics for any website, including engagement rate, traffic ranking, keyword ranking, and traffic source.
The Similarweb extension provides you with the full breadth of similarweb.com directly from your browser toolbar. With a single click, you can get in-depth statistics for any website you visit.
It’s important to note that not all sites on the entirety of the internet are stored in SimilarWeb’s database, so you may not see your site’s stats if you’re just starting out, or don’t currently have many page views.
App.telemetry makes it easy to quickly test your site’s speed by clicking its icon in your browser, once installed. You can see exactly where you can improve your site’s speed with the categories listed for you along with the total load times.
Its Page Speed Monitor shows the offset and duration of each step during the page load, based on W3C navigation timing. As soon as you access a page, you see the load time in the status bar, and detailed information is a click away.
Some of the categories you can see include redirects, cache, DNS lookup, and on-load events. While it doesn’t show detailed stats, it’s a great solution if you need a quick way to check the progress of your site while you’re in development.
One of the most helpful tools for developers, Toptal’s Web Developer Google Chrome extension, analyses and checks your webpage for any major violations of web design best practices.
It looks for SEO, usability, accessibility, and performance (page speed)—among others.
Open SEO Stats (formerly called PageRank Status), helps you get a snapshot of where you stand on the internet by displaying the page ranks for Alexa, Google, Compete, and Quantcast, when you click its button in your browser.
It also has the ability to show WHOIS information, and the number of pages that are indexed in search engines (including Google, Bing, & Yahoo).
Additionally, it shows cache stats (Archive.org, Google), as well as getting information on backlinks, socials, Geo IP location, and more.
If you opt for a premium account, you can unlock several more helpful features.
Ubersuggest – SEO and Keyword Ideas
Ubersuggest offers a quick way to get an overview of the SEO of the sites you are browsing, and the keywords it ranks.
Once installed, go to Google, YouTube, or Amazon, and perform a search. That is where you will see data around the keywords and search terms. On any given keyword you searched for, click “view all” next to the search bar to get access to even more keywords and SEO insights.
Ubersuggest SEO extension also has graphs and trends, backlinks data, related keywords, “people also search for”, trending & long-tail keywords, and customization of your location and language.
While WMPU DEV’s SmartCrawl is more thorough in evaluating the performance of your website, you might want to know the average performance of some other third-party websites. This is where the Lighthouse developer extension comes in handy.
When auditing a page, Lighthouse runs a barrage of tests against it and then generates a report on how well the page did. From here you can use the failing tests as indicators of what you can do to improve your app.
Simply install the plugin, click on its icon, and it automatically starts analyzing via Lighthouse.
Tag Assistant for Conversions Beta (by Google)
Tag Assistant for Conversions Beta helps validate your website implementation used to measure conversions for Google Ads.
Tag Assistant enables you to step through the entire user journey by simulating a click on an ad, arriving on your website, navigating the site, and ultimately converting.
The step-by-step guidance will highlight potential problems or misconfigurations, and ultimately let you know when the conversion is being recorded correctly.
WordPress Development
WordPress.org Plugins SVN Link
This isn’t your typical extension – a button doesn’t show up at the top of your browser. Instead, a button displays for pages in the WordPress plugins directory.
Underneath the usual download button, you’ll also see an SVN Repository button once this extension is installed. Once clicked, you’ll be able to check out the plugin’s code first-hand.
You’ll be able to take a look under the hood and view the code’s quality before deciding to download the plugin. You’ll be able to have the opportunity to catch bloated or malicious code before installing the plugin, helping you to avoid disaster before it strikes.
This Google Chrome developer extension makes it easier for you to manage your MySQL database. It provides you with the administration GUI of the MySQL server, similar to phpMyAdmin, Sequel Pro.
MySQL Admin features include:
- Connecting to MySQL server (4.1 or later), connecting to MySQL server with SSL, connecting to MySQL server via SSH2 Port forwarding
- Displaying the statistics and process list of the connected server (refresh automatically), table list, and rows of selected table
- Creating and dropping tables, inserting and updating rows
- Exporting databases
Link Redirect Trace was built to replace all other “partial solution” extensions and is the all-in-one redirect path analyzer that gives you the full picture on every redirect―HTTP Headers, Rel-Canonicals, robots.txt, link power, trust, and risk analyzed.
Perform advanced, comprehensive, and―most important―correct analysis of links, redirects, and REL-canonicals. Use this extension for your SEO analysis, On page SEO, Off page SEO, competitor analysis and more.
Before installing another Chrome extension, note that this functionality may already be included as part of an SEO tool or WordPress plugin you already use.
Inspect styles in a simple, well-organized, & beautiful way with CSS Peeper.
CSS Peeper is a Chrome CSS extension viewer tailored for designers, that allows you to focus on design instead of digging in code.
Need to know the line height, font, or button size on a website? Check the hidden CSS style of objects, colors and assets on the web easily using this extension.
With almost a million users and a 4.5-star rating, it’s safe to say that Web Developer is one of Google Chrome’s best extensions for web developers.
Developed by Chris Pedrick, this extension adds a little toolbar with various web developer tools pertaining to images, information, resizing, forms, and much more.
Clockwork provides a set of development tools for PHP developers. It provides a new panel with all required information for debugging and profiling PHP scripts, including request data, application log, database queries, routes, and the visualization of application runtime.
Clockwork uses a server-side component that gathers all relevant data and easily integrates with any PHP project. It includes support for Laravel, Slim 2, and CodeIgniter 2.1 based applications.
This Google Chrome extension helps with debugging, profiling, and tracing PHP code instead of struggling with POST/GET variables or cookies.
XDebug Helper is very useful for PHP developers that are using PHP tools with Xdebug support (like PHPStorm, Eclipse with PDT, Netbeans, and MacGDBp), or any other Xdebug compatible profiling tool (like KCacheGrind, WinCacheGrind, or Webgrind).
Important: you need to be in Developer mode (on chrome: // extensions/ page) for this to work.
Don’t be worried by the last update indicated (2016). WP reviews as recent as July 2021 were 5-star ravings, and we concur―it’s still great.
A tool developed by Elbert Alias in 2009, Wappalyzer is a Google Chrome extension that allows developers to identify the various technologies that make up the back end of a website.
Wappalyzer is an open-source and cross-platform utility that is able to detect over 1000 technologies, including content management systems, eCommerce platforms, web frameworks, server software, analytics tools, and more.
Thanks to Google’s mobile-first index initiative, it’s more important now than ever for developers to test websites for responsive design—this is where Window Resizer comes in.
This Google Chrome extension resizes the browser window so that you can test your responsive design based on various resolutions. The most common screen sizes are available (for laptop, desktop, and mobile), but you can also enter in your own customized window sizes.
You only have two eyes, which will inevitably be looking at the same place. Even so, it can often be very useful to split the screen between several windows, either to copy the content or even to follow a tutorial. With this extension, you can split the screen between four windows, or between two, vertically and horizontally.
It also has the options of “empty tab”, which automatically creates other empty tabs, or “single tab”, which changes only the current tab. Resize the CURRENT tab and tabs to the RIGHT into layouts on separate windows.
With multi-monitor support, Tab Resize makes split-screen easy.
Thus ends our recommended list of best chrome extensions for developers.
There’s No Place Like Chr(H)ome
Considering the wide usage and popularity of Google’s Chrome browser, coupled with its ease of use, speed, reliability, and a vast selection of tools in the form of extensions and themes, it’s a well-informed choice to make it your browser for development.
Chrome has been busy proliferating a vast array of the best chrome extensions for web developers for more than a decade―from the most elemental and general design & development tools, to those geared to programming languages (such as HTML, PHP, CSS, etc.).
The sky’s the limit here… build your collection to fit your personal workflow. It bears mentioning that some of these extensions require you to enter personal information, such as your site’s login. While we’ve had no problems using free versions of these extensions, always exercise due caution before providing personal credentials.
If you’re looking for more good reads on this subject, check out these additional articles:
- Using Heat Maps to See Exactly Where Visitors Are Clicking On Your WordPress Site
- 12 Not-So-Obvious WordPress Tweaks to Improve Posts and Pages
- Improve the WordPress Visual Editor With These Cool Hacks
- Leveraging Chrome Developer Tools for WordPress Development
With a hunger for continued learning and a killer tool kit at your disposal, honing your developer skills is potentially limitless. As WPMU DEV member, Lucas Ondata Marketing, put it: you’ll have an enviable “utility belt for heroes working with websites”.
Janette Burhans Janette Burhans is a content creator at WPMU DEV, who writes blog articles and the weekly WhiP & Roundup emails. Her professional career as an author and artist spans over two decades, half of those in the world of WordPress. Her writing has been featured in Glamour magazine, and her personal blog, Platinum Pink. Connect with Janette on Twitter.