The Chrome extensions most web developers end up keeping fall into five groups: framework devtools (React, Vue, Angular, Redux), accessibility checkers (axe DevTools, WAVE), page inspectors (Web Developer, WhatFont, ColorZilla, Wappalyzer), a mobile view tool, and a few utilities. Install only what you use every week, because every extension adds permissions and can slow the browser. The list below explains what each one does that Chrome DevTools does not already do.
Disclosure: we make Mobile View Extension, which appears in the mobile section. The other extensions are made by other developers and are included because they fill a clear gap.
First, what Chrome DevTools already covers
Before adding anything, it helps to know what is built in. Chrome DevTools includes element and CSS inspection, a JavaScript debugger, network and performance recording, device emulation for mobile (guide), user agent overrides (guide), Lighthouse audits (guide), a colour picker and contrast checker in the Styles pane, and CSS overview. Many older “web developer” extensions duplicate these features. A tour of the built-in panels is in our Chrome DevTools guide.
Framework devtools
| Extension | Made by | What it adds |
|---|---|---|
| React Developer Tools | Meta (React team) | Components and Profiler panels: inspect props, state and hooks, find slow renders |
| Vue.js devtools | Vue team | Component tree, Pinia state, router and timeline for Vue apps |
| Angular DevTools | Angular team | Component explorer and change-detection profiler |
| Redux DevTools | Redux maintainers | Action log, state diff and time-travel debugging for Redux and compatible stores |
Install the one for the framework you use. They only activate on pages that use that framework.
Accessibility checkers
axe DevTools (by Deque) adds a DevTools panel that scans the page for WCAG issues such as missing labels, low contrast and ARIA errors, with explanations and links to the rule. Its free tier covers automated scans.
WAVE (by WebAIM) overlays icons on the page itself, showing where each error, alert and structural element is. It is particularly good for explaining issues to designers and content editors.
Automated checkers catch only part of accessibility problems. Use them alongside keyboard testing and a screen reader.
Page inspectors
Web Developer (by Chris Pederick) is a long-running toolbar with hundreds of small tools: disable CSS or JavaScript, outline elements, show image alt text, view form details and more. Many of its features exist somewhere in DevTools, but the toolbar makes them one click away.
WhatFont identifies the font of any text you hover over, including fallback fonts actually in use.
ColorZilla adds an eyedropper that picks colours from anywhere on the page, plus a colour history and gradient generator.
Wappalyzer shows the technologies a site uses: CMS, frameworks, analytics and hosting. Useful for competitor research and for understanding a client’s stack before a project.
Mobile view and responsive testing
DevTools device mode is powerful, but it takes several steps per tab and fills a large part of the screen. If you check mobile layouts many times a day, a dedicated extension saves time.
Mobile View Extension reloads the current tab inside a phone or tablet frame with a device-specific user agent, client hints, screen size and pixel ratio. You pick named Apple and Android presets or enter a custom resolution, rotate to landscape, and save a PNG screenshot of the framed view. It works on localhost, stays on as you navigate, and does not collect browsing data. Its limits are the same as most in-browser previews: interaction is by mouse, without touch events, and some media queries such as hover and pointer are not fully emulated. A fuller comparison is in mobile simulator extensions vs DevTools.
Utilities
A JSON viewer extension formats raw JSON responses as a collapsible tree when you open an API URL. Chrome shows plain text by default.
A user agent switcher is useful if you often test device detection or browser-specific code paths. Read what a user agent switcher does first; for mobile layouts, a mobile view tool is the better fit.
How to judge whether an extension is safe
Extensions for developers often request access to all sites, which means they can read and change every page you open, including admin panels and email. Before installing:
- Check who publishes it. Framework devtools should come from the framework’s own team.
- Read the permissions on the Chrome Web Store listing. A font identifier does not need access to your downloads.
- Read the privacy policy. It should say what is collected. “Nothing” is a good answer for most developer tools.
- Look at the last update date. Unmaintained extensions break with Chrome updates and miss security fixes.
- Watch for ownership changes. Popular extensions are sometimes sold and then start injecting ads. If an extension’s behaviour suddenly changes, remove it.
Use a separate Chrome profile for development if you want to keep developer extensions away from your personal browsing.
A minimal starter set
If you are setting up a new machine, start with:
- the devtools for your framework
- axe DevTools or WAVE
- a mobile view extension
- WhatFont or ColorZilla if you work closely with design
Add others only when you notice yourself repeating a task that one of them would solve.
Frequently asked questions
What is the most useful Chrome extension for web developers?
The framework devtools for whatever you build with, because nothing in Chrome replaces them. After that, an accessibility checker and a mobile view tool give the most value for most front-end developers.
Do Chrome extensions slow down the browser?
Each extension uses memory and may run scripts on every page. A few well-made extensions have little effect; dozens of them can slow page loads and DevTools. Disable the ones you are not using.
Is Lighthouse an extension?
Lighthouse is built into Chrome DevTools as a panel. A separate Lighthouse extension also exists, but the DevTools panel is the usual way to run it.