Chrome Extensions for Developers: The 20 Must-Haves I Actually Keep Installed

*As an Amazon Associate I earn from qualifying purchases.

TL;DR

Install React DevTools, Wappalyzer, VisBug, GitHub Refined, and Lighthouse first. Then layer in debuggers (Redux, Vue), network tools (Postman Interceptor, ModHeader), and niche utilities based on your stack. Avoid extension bloat—I run exactly 14 across my dev profiles.

Why Most Developers Don’t Optimize Their Own Browser

There’s an odd disconnect: developers spend weeks optimizing codebases, refactoring imports, and shaving milliseconds off runtime—then open a browser weighed down by 40+ extensions they installed once and forgot about.

I used to be that developer. Chrome would lag, tabs would freeze, and I’d blame the website. Then I audited my installed extensions: password managers (three of them), ad blockers (two), SEO analyzers, analytics tools, form fillers, and a dozen others that sounded useful at the time.

The shift happened when I started asking one question: Does this extension reduce my shipping time or time-to-debug? If not, it’s gone. This list is what survived that filter.

“The fastest browser is one that stays out of your way. Every extension is a tax on startup time and memory. Make each one earn its place.”

Debugging & Framework DevTools

Foundation Layer

These are non-negotiable if you build modern web apps. They’re not just nice-to-haves; they’re the difference between inspecting your app blindly and understanding its state in real time.

⚛

React DevTools

Component inspection, state drilling, render profiling

The first extension I install in any new Chrome profile. You get a dedicated React tab in DevTools that shows your component tree, props, hooks state, and render counts. Spotting unnecessary rerenders or stale props becomes instant—not “let me add console.logs and refresh” territory.

Why I keep it: State inspection alone cuts debugging time by ~60%. You can watch how props flow down and state changes ripple through your app in real time.

Redux DevTools — Time-travel debugging for Redux. Replay actions, inspect state at any point in history. Essential if you’re not using Zustand or Jotai.
Vue DevTools — Same confidence level as React DevTools but for Vue. Component tree, emitted events, mutation history.

Network & API Debugging

Request Layer

Your app isn’t your problem 60% of the time. Your API contract is. These extensions cut through the noise of network tabs and give you surgical control over requests.

📡

Postman Interceptor

Capture live traffic, build API tests from browsing

Instead of manually typing curl commands, Postman Interceptor watches your network traffic and lets you save any request as a reusable API call. Build a test suite while you browse. Works for web apps, SPAs, and REST APIs without extra setup.

Why I keep it: It turns your browser into a living API reference. When a teammate asks “what’s the payload structure for login?”, you show them the captured request, not a Notion doc that drifted from reality.

ModHeader — Add, modify, or remove headers in real time. Mock authorization tokens, swap API endpoints, or force specific user-agent strings without touching code.
Resource Override — Swap local files into live websites. Test a new CSS build, JavaScript bundle, or image without deploying. Load a local CSS file into production to catch broken layouts in seconds.

Design & CSS Inspection

Visual Layer

The DevTools inspector is solid, but it’s a text interface for a visual medium. These extensions give you pixel-level insight and faster visual debugging.

🎨

VisBug

Click-to-inspect, instant CSS editing, layout overlay

Click any element on the page, and VisBug opens a visual inspector. Change padding, margins, colors, and fonts by dragging handles directly on the page. See real-time CSS changes without opening DevTools. It’s like Figma’s inspect mode but for live websites.

Why I keep it: When a design doesn’t match the spec, I can visually debug in seconds. No squinting at computed styles or doing mental math on rems and pixels.

WhatFont — Hover over any text and see its typeface, weight, size, and line-height. Kills “what font did they use?” questions instantly.
ColorZilla — Color picker with palette generation. Point at any element and extract its hex, RGB, or HSL value. Supports contrast checking for accessibility.
Eye Dropper — Native-feeling color picker. Lighter weight than ColorZilla; good if you prefer minimalism. Simple, one-job extension.
CSS Peeper — Extracts CSS rules for any element and shows you the cascade. Understand which rule is winning without digging through stylesheets.

Tech Stack Detection

Reconnaissance

Competitive intelligence, architecture research, or just curiosity—knowing what tech a site runs on saves hours of guessing.

🔍

Wappalyzer

Identifies frameworks, libraries, CMS, CDNs, and hosting

Click the extension icon on any website, and Wappalyzer shows you the full stack: React or Vue? Webpack or Vite? Which hosting provider? CDN? Payment processor? It’s uncanny how often it’s right. Useful for learning from competitors’ tech choices or understanding unfamiliar architectures.

Why I keep it: When evaluating a tool or studying how a competitor built their app, this is the first layer of reconnaissance. Saves a ton of Network tab hunting.

BuiltWith — Similar to Wappalyzer but with more detail on company info, hosting, and analytics stacks. Heavier; I run both for overlap coverage.

Performance Debugging

Speed & Metrics

Shipping fast isn’t enough if the user experience is slow. These extensions turn abstract “Core Web Vitals” into actionable data you can fix.

⚡

Lighthouse

Built into DevTools; audits performance, accessibility, SEO

It’s technically built into Chrome DevTools now, but I list it here because too many developers ignore it. One click runs a full audit: performance scores, LCP/FID/CLS metrics, accessibility violations, and SEO gaps. Then it gives you actionable fixes.

Why I keep it: Before shipping a feature, I run Lighthouse. It catches low-hanging fruit (unused CSS, missing alt text, unoptimized images) that would tank real-user metrics.

Web Vitals — Google’s official extension. Shows real-time Core Web Vitals (LCP, FID, CLS) as you interact with the page. Better than guessing from lab data.
PerfMap — Visualizes HTTP requests on the page. Shows you which domains are slow and where bandwidth is being wasted. Great for understanding third-party script impact.

JSON & API Response Handling

Data Layer

JSON is everywhere. These extensions make reading and parsing it less painful.

JSON Viewer — Formats raw JSON responses in the browser. Click any JSON file or API response, and it renders in a readable tree format. Color-coded keys, searchable, collapsible branches.
JSONVue — Similar to JSON Viewer. Smaller footprint; some prefer its interface. Both are lightweight, so pick one.

Security & Dependency Auditing

Risk Management

You can’t patch what you don’t know about. These extensions flag vulnerable libraries running on any site you visit.

Retire.js — Scans JavaScript libraries for known vulnerabilities. Visit any website, and it alerts you to outdated jQuery versions, vulnerable Bootstrap, or dangerous polyfills. Essential for security audits and understanding supply chain risk.

Accessibility Testing

Inclusive Design

Accessibility isn’t a checkbox. These extensions embed testing into your workflow.

axe DevTools — Automated accessibility scanner. Finds WCAG violations (color contrast, missing labels, broken focus management, semantic HTML issues). Report-grade output for compliance teams.
WAVE — Web Accessibility Evaluation Tool. Visual overlay showing contrast errors, missing alt text, form label issues. Slightly less automated than axe, but the visual highlighting is sometimes clearer.

GitHub & Productivity

Workflow Layer

🐙

GitHub Refined

Better GitHub UX—better file tree, PR filtering, faster nav

GitHub’s default file tree is nested and slow. GitHub Refined gives you a sidebar explorer, keyboard shortcuts, PR filters, and better diff views. Code review becomes less tedious when you’re not collapsing folders for 30 seconds at a time.

Why I keep it: We live in GitHub now. Saving 20 clicks per day on navigation and review tasks adds up.

Octotree — Tree view for GitHub repos. Click a file, and it opens in a sidebar instead of blowing out the whole viewport. Copy file paths with one click. Essential for navigating large monorepos.
daily.dev — New tab page for developer news. Aggregates posts from dev communities, blogs, and platforms. I use it to stay current on framework releases and industry shifts without opening ten tabs.

My Actual Install List (14 Extensions, No Bloat)

Here’s what lives in every one of my Chrome profiles. I’ve audited this list quarterly for two years:

React DevTools
Redux DevTools
Postman Interceptor
ModHeader
VisBug
Wappalyzer
Lighthouse (built-in)
Web Vitals
JSON Viewer
axe DevTools
GitHub Refined
Octotree
daily.dev
Retire.js

Everything else is noise. I skip password managers (use system keychain), ad blockers (I don’t mind ads that load fast), and form fillers (bad security practice). Keeping the list short means faster startup, lower memory overhead, and less surface area for security issues.

Quick Comparison: 20 Top Extensions at a Glance

Extension	Category	Free?	Must-Have?
React DevTools	Debugging	✓	Yes (React devs)
Redux DevTools	Debugging	✓	Yes (Redux users)
Vue DevTools	Debugging	✓	Yes (Vue devs)
Postman Interceptor	Network	✓	Yes (API work)
ModHeader	Network	✓	Yes (testing)
Resource Override	Network	✓	Yes (live debugging)
VisBug	Design	✓	Yes
WhatFont	Design	✓	Nice-to-have
ColorZilla	Design	✓	Nice-to-have
Eye Dropper	Design	✓	Nice-to-have
CSS Peeper	Design	✓	Nice-to-have
Wappalyzer	Tech Detection	✓	Yes
BuiltWith	Tech Detection	✓	Nice-to-have
Lighthouse	Performance	✓	Yes
Web Vitals	Performance	✓	Yes
PerfMap	Performance	✓	Nice-to-have
JSON Viewer	API	✓	Yes
Retire.js	Security	✓	Yes
axe DevTools	Accessibility	✓	Yes (a11y work)
GitHub Refined	Productivity	✓	Yes (GitHub daily)

Extension Setup Best Practices

Keep It Minimal

More extensions = slower browser. Before installing anything, ask: Does this reduce shipping time by at least 5 minutes per week? If not, it’s a net loss.

Audit Quarterly

Set a reminder every three months to review installed extensions. Look at actual usage (Chrome DevTools has a tab for this). If you haven’t used it in six weeks, uninstall it.

Use Separate Profiles

Create a “Dev” profile with all your tools and a “Browsing” profile with nothing. Switch profiles when you need focus or when demoing the app to others.

Watch for Security Updates

Extensions are code running with elevated permissions. Keep them updated. If an extension goes unmaintained (no updates in 1+ year), replace it or remove it.

Common Questions

What about password managers as an extension?

I use the system keychain (macOS) or Windows Credential Manager instead. They’re built-in, more secure, and free. 1Password/LastPass as extensions add surface area for attacks and slow startup. Use your OS, not a third-party extension.

Shouldn’t I use DevTools instead of extensions?

DevTools is incredible, but some tasks are faster in an extension. VisBug’s click-to-edit is way faster than opening DevTools and hunting the element tab. Wappalyzer’s one-click stack detection beats digging Network and Source tabs. They’re complements, not replacements.

Does extension load time matter?

Yes. Every extension adds overhead to browser startup. I keep mine to 14 and avoid heavy background scripts. If an extension forces a full DevTools reload or takes >2 seconds to initialize, it’s gone.

Which extension is most underrated?

Resource Override. Most developers don’t know it exists, but it saves me 30+ minutes per week by letting me test local builds against production APIs without deploying. It’s a time machine for debugging.

Build Smarter. Extend Strategically.

Extensions are a force multiplier, but only if you’re ruthless about keeping them lean. Start with the foundation layer (React DevTools, Lighthouse, VisBug), then add based on your stack. Audit every quarter. Ship faster.

Back to the Pillar: 50 Chrome Extensions