Your browser is already your most-used development tool. The right extensions turn it into a complete debugging and productivity suite. These 10 extensions solve real problems — not hypothetical ones.
All of them work in Chrome or Chromium-based browsers (Edge, Brave, Arc). Most work in Firefox too.
1. React Developer Tools
Best for: React application debugging
The official React DevTools extension is non-negotiable if you work with React. It adds two panels to DevTools:
- Components: Browse your component tree, inspect props and state, see what's causing re-renders
- Profiler: Record rendering sessions and identify performance bottlenecks by component
Why it matters: Console logging React component state is frustrating. DevTools lets you click any element and immediately see the full component hierarchy, its current props, and hooks state. You can even edit state live and see the UI update.
2. JSON Viewer Pro
Best for: Working with APIs
When you open a JSON endpoint in the browser, the default behavior is a wall of unformatted text. JSON Viewer Pro formats it into a collapsible, syntax-highlighted tree with:
- Search/filter functionality
- Raw/formatted toggle
- Copy path to any node
- Dark mode
Alternative: Some developers prefer JSON Formatter (simpler) or use the browser's built-in JSON viewer if it's available (Firefox has one natively).
- Chrome Web Store
- Free (pro version available)
Tip: For heavy API work, combine this with DevPlaybook's free JSON Formatter tool that handles large payloads without browser slowdown.
3. Wappalyzer
Best for: Competitive research and technology discovery
Wappalyzer detects the technology stack of any website — CMS, frameworks, hosting providers, analytics tools, payment processors, CDN, and more. Visit a competitor's site, click the extension, and see their full stack.
Real use cases:
- "What CMS is that fast site using?"
- "Are they using Cloudflare or Fastly?"
- "What analytics tool replaced Google Analytics on that site?"
Checking if a potential employer uses your stack
Free tier available; paid plans for bulk lookup
4. axe DevTools
Best for: Accessibility testing
axe DevTools adds an accessibility panel to Chrome DevTools that scans the current page and reports WCAG violations with:
- Issue severity (critical, serious, moderate, minor)
- Which element is affected
- How to fix it
- Links to WCAG criteria
This is the fastest way to catch the most common accessibility issues before they become compliance problems. The free version covers the majority of use cases; the paid version adds more rules and guided testing workflows.
Why not just Lighthouse? axe catches more issues and gives better remediation guidance. Use both — they complement each other.
- Chrome Web Store
- Free (significant free tier)
5. ColorZilla
Best for: Grabbing colors from any webpage
ColorZilla is a color picker that can sample any pixel on a webpage and give you its hex, RGB, or HSL value. It also includes:
- Color history
- Gradient generator
- CSS color code copy
Use case: You're building a site and need to match a competitor's exact button color. Or you're debugging a CSS issue and need to know what color is actually being rendered (computed, not declared).
6. Requestly
Best for: Mocking APIs and modifying network requests
Requestly intercepts and modifies HTTP requests in real time without touching your code. Use cases:
- Redirect requests: Point API calls from production to your local dev server
- Mock API responses: Return custom JSON for any endpoint
- Modify headers: Add auth headers or CORS overrides
- Throttle requests: Simulate slow network for specific endpoints
- Block requests: Prevent analytics or third-party scripts from loading
This is the extension that eliminates entire categories of "I can't test this without touching production" problems.
- Chrome Web Store
- Free tier covers most use cases; paid plans for teams
7. Web Developer
Best for: CSS and layout debugging
The Web Developer extension by Chris Pederick has been around since 2003 and remains useful. It provides a toolbar with quick toggles for:
- Disable CSS (all or specific stylesheets)
- Outline all block elements, tables, or positioned elements
- Show image dimensions
- Validate HTML/CSS via W3C
- Clear cookies, disable JavaScript
- View page source in a new tab
It's not glamorous, but the "outline all divs" and "disable all CSS" features save time when debugging layout issues.
8. Vue.js devtools
Best for: Vue application debugging
If you use Vue instead of React, Vue Devtools is the equivalent to React DevTools. It provides:
- Component tree browser
- Reactive state inspection
- Vuex/Pinia store inspector
- Router navigation timeline
- Performance tracking
Available for both Vue 2 and Vue 3 (separate extensions for each major version).
9. Lighthouse (Built-in, but Use It)
Best for: Performance, SEO, and best practices auditing
Lighthouse is built into Chrome DevTools but deserves a mention because many developers never use it. Access it via DevTools → Lighthouse tab.
It audits your page for:
- Performance: Core Web Vitals (LCP, CLS, FID/INP), asset loading
- Accessibility: Common WCAG violations
- SEO: Meta tags, robots, structured data
- Best practices: HTTPS, modern APIs, deprecated features
Tip: Run Lighthouse in incognito mode with no extensions active to avoid interference from other tools. Use the "Desktop" simulation when testing non-mobile sites.
- Built into Chrome DevTools (no install needed)
- Free
10. EditThisCookie
Best for: Cookie inspection and manipulation
EditThisCookie gives you a simple UI to view, edit, add, and delete cookies for the current domain. Useful for:
- Checking what auth tokens look like
- Testing "logged out" states without clearing all cookies
- Copying session cookies between browser profiles
- Debugging cookie expiration issues
It's less powerful than the Cookies tab in DevTools but faster to use for quick cookie edits.
- Chrome Web Store
- Free
Honorable Mentions
- Lighthouse CI: For tracking performance over time in CI
- Angular DevTools: If you're on Angular
- Redux DevTools: Time-travel debugging for Redux
- HTTPS Everywhere (EFF): Forces HTTPS where available
- uBlock Origin: Block ads in development to simulate real-user experience
Setup Tips
Keep your dev extensions separate from your regular browsing. Create a dedicated browser profile for development with all your tools installed. Keep your personal profile clean.
Disable unused extensions: Every active extension adds a small performance cost to page loads. Keep only what you actively use.
Check for Manifest V3 compatibility: Chrome deprecated Manifest V2 extensions. Most major developer extensions have updated, but a few older ones may stop working in 2025.
Quick Reference
| Extension | Primary Use | Browser |
|---|---|---|
| React DevTools | React debugging | Chrome, Firefox |
| JSON Viewer Pro | API response viewing | Chrome |
| Wappalyzer | Tech stack detection | Chrome, Firefox |
| axe DevTools | Accessibility testing | Chrome |
| ColorZilla | Color sampling | Chrome, Firefox |
| Requestly | Network request mocking | Chrome |
| Web Developer | CSS/layout debugging | Chrome, Firefox |
| Vue DevTools | Vue debugging | Chrome |
| Lighthouse | Performance auditing | Chrome (built-in) |
| EditThisCookie | Cookie management | Chrome |
Find more developer tools at DevPlaybook.cc — free online tools for JSON formatting, regex testing, base64 encoding, and more.
Level Up Your Dev Workflow
Found this useful? Explore DevPlaybook — cheat sheets, tool comparisons, and hands-on guides for modern developers.
🛒 Get the DevToolkit Starter Kit on Gumroad — 40+ browser-based dev tools, source code + deployment guide included.
Top comments (0)