Chrome DevTools Extensions: 10 Best Picks for Developers

The Chrome extensions most worth installing as a developer in 2026 are the framework DevTools (React Developer Tools, Redux DevTools, Vue.js devtools, Angular DevTools, Apollo Client Devtools), plus a few general tools: axe DevTools for accessibility, Wappalyzer for detecting a site's tech stack, Requestly for rewriting and mocking requests, JSON Formatter, and Refined GitHub. Several old favorites are no longer needed because Chrome's built-in tools now cover them, including the Web Vitals extension, which Google retired in 2025.

All picks below are free (some have paid upgrades), run on Manifest V3, and are listed on the Chrome Web Store as of October 2026. Most also exist for Edge, Brave and other Chromium browsers.

The list at a glance

Extension	What it adds	Adds a DevTools panel?	Cost
React Developer Tools	Component tree, props/state/hooks, Profiler	Yes	Free, open source
Redux DevTools	Action log, state diff, time travel	Yes	Free, open source
Vue.js devtools	Components, Pinia, router, timeline	Yes	Free, open source
Angular DevTools	Component tree, injector and router trees, change-detection profiler	Yes	Free, official
Apollo Client Devtools	GraphQL cache, queries, mutations	Yes	Free, open source
axe DevTools	Accessibility scan with fixes	Yes	Free; Pro is paid
Wappalyzer	Detects frameworks, CMS, analytics on any site	No (toolbar)	Free extension; paid plans for bulk
Requestly	Redirect, modify headers, mock API responses	No (own UI)	Free tier; paid plans
JSON Formatter	Readable, collapsible JSON in the browser	No	Free, open source
Refined GitHub	Many small improvements to github.com	No	Free, open source

Framework DevTools extensions

These add a tab inside Chrome DevTools (F12), which is what most people mean by a "Chrome DevTools extension".

1. React Developer Tools

Adds Components, Profiler and Suspense tabs on any React page. Inspect and edit props, state and hooks, see which component rendered an element, and record why each component re-rendered. Install it from the Chrome Web Store. Full walkthrough: React DevTools guide.

2. Redux DevTools

Shows every dispatched action, the state before and after, a diff, and lets you jump back to any earlier state. Redux Toolkit's configureStore connects to it automatically. Zustand, Jotai and other libraries can also report to it through middleware. Setup and tips: Redux DevTools best practices.

3. Vue.js devtools

The official Vue extension: component tree with editable state, Pinia stores, router, and a timeline of events. The current version supports Vue 3; Vue 2 apps need the legacy build. See our Vue DevTools guide.

4. Angular DevTools

Maintained by the Angular team. Its tabs show the component and directive tree (with editable state), the injector hierarchy and the router tree, and its profiler records change-detection cycles so you can see which components were checked and how long each took. It only works on development builds (angular.dev).

5. Apollo Client Devtools

For apps using Apollo Client: search the cache, see watched queries and fired mutations with their variables (and re-run them), and run queries against your server from a built-in Explorer (GitHub).

General developer tools for Chrome

6. axe DevTools

Deque's accessibility checker adds an axe DevTools tab. Click scan and it lists WCAG issues (missing labels, low contrast, invalid ARIA) with the offending element and how to fix it. The free version covers full-page scans; guided tests are in the paid Pro tier. Lighthouse's accessibility score uses the same axe-core engine, but the extension gives far more detail.

7. Wappalyzer

Click the toolbar icon on any site to see what it's built with: framework, CMS, CDN, analytics, payment provider. Handy for competitor research or for checking which React or Next.js version a client's site runs.

8. Requestly

Rules that change HTTP traffic in the browser: redirect a production script to your local build, add or remove headers, delay requests, or return a mock API response before the backend exists. BrowserStack acquired Requestly in May 2025 and says it remains open source (BrowserStack). For simple cases, DevTools' own Local Overrides (Sources panel) can override responses and headers without an extension.

9. JSON Formatter

Turns raw JSON responses opened in a tab into a syntax-highlighted, collapsible tree, with a toggle back to raw. Open-source and small, which matters for an extension that reads page content.

10. Refined GitHub

An open-source extension that adds dozens of small improvements to github.com, mostly around pull requests, diffs, issues and navigation. Every feature can be turned off individually in its options page.

Extensions you no longer need

Extension	Use this built-in feature instead
Web Vitals	Live LCP, CLS and INP in the DevTools Performance panel (the extension was retired after Chrome 132) (Chrome blog)
Lighthouse	The Lighthouse panel in DevTools, or the lighthouse npm package for CI
ColorZilla and other eyedroppers	The color picker in the Styles pane has an eyedropper and contrast ratio
EditThisCookie and cookie editors	Application > Storage > Cookies lets you view, edit and delete cookies
Window resizers	Device mode (Ctrl+Shift+M / Cmd+Shift+M)

For a tour of what Chrome already includes, see our Chrome DevTools overview.

Manifest V3: what changed for developer extensions

Chrome disabled all Manifest V2 extensions in Chrome 138 (July 2025), removed the enterprise policy that kept them alive in Chrome 139, and on August 31, 2026 removed the remaining MV2 extensions from the Chrome Web Store (Chrome for Developers). If an old developer tool vanished from your toolbar, that's why. Every extension in this list has an MV3 version.

Security: treat extensions like dependencies

A developer extension often has permission to "read and change all your data on all websites", which includes your admin dashboards, cloud consoles and localhost. Extensions also update silently: in December 2024 attackers phished several extension developers and pushed malicious updates through the Chrome Web Store.

• Install only what you use, from the official publisher, and remove the rest.
• In chrome://extensions, open Details and set Site access to On click or On specific sites for tools you only need sometimes, such as Wappalyzer.
• Use a separate Chrome profile for extension-heavy development, and keep your everyday profile (email, banking, production admin) lean.
• Prefer open-source extensions for anything that reads page content or network traffic.

Build your own DevTools extension

A DevTools panel is a normal extension with a devtools_page in manifest.json (Chrome docs):

{
  "manifest_version": 3,
  "name": "My Panel",
  "version": "1.0",
  "devtools_page": "devtools.html"
}

devtools.html loads a script that creates the panel:

chrome.devtools.panels.create('My Panel', '', 'panel.html');

Inside the panel, chrome.devtools.inspectedWindow.eval() runs code in the inspected page and chrome.devtools.network reads its requests. Load the folder via chrome://extensions > Developer mode > Load unpacked to test. If you publish one, you can list it among other browser extension tools on DevHunt.

FAQ

What is a Chrome DevTools extension?

An extension that adds its own tab or sidebar pane inside Chrome DevTools, using the devtools_page manifest key and the chrome.devtools APIs. React Developer Tools and Redux DevTools are the best-known examples.

Are Chrome developer extensions safe?

Most are, but they can read the pages you visit. Install from known publishers, restrict site access to "On click", and use a separate profile for development.

Do Chrome extensions work in Edge and Brave?

Yes. Edge, Brave, Arc, Opera and other Chromium browsers install extensions from the Chrome Web Store. Firefox needs its own versions, which most framework DevTools also publish.

Why don't my extensions appear in Incognito?

Extensions are disabled in Incognito by default. Open the extension's Details page in chrome://extensions and turn on Allow in Incognito.