Best Developer Extensions for Chrome

Updated October 2026

How to choose a developer extension

Start with what you build. Eight of these only work with one framework or library. Four work on any page, and Refined GitHub works on GitHub.com only.

• React, Vue, Redux, Apollo, Preact, Solid, Ember or MobX. Pick the one that matches your stack. React Developer Tools, Vue.js devtools, Redux DevTools, Apollo Client Devtools, Preact Developer Tools, Solid DevTools, Ember Inspector and MobX Developer Tools show nothing for apps built another way. Vue.js devtools covers Vue 3 only.
• Any page. Lighthouse audits the page you are on. JSON Formatter formats any JSON response you open. Requestly redirects URLs, modifies headers and mocks requests on the sites you test. Header Editor rewrites request and response headers, redirects and blocks requests with rules you write; the Chrome Web Store build is the Lite version. Refined GitHub simplifies the GitHub interface and adds 100+ small improvements for repositories and pull requests, on GitHub.com only.
• App setup. Redux DevTools, Preact Developer Tools and Solid DevTools need a small setup step in your app before they show data. MobX Developer Tools needs a companion package for mobx-state-tree stores.
• Access you grant. Redux DevTools, JSON Formatter, Preact Developer Tools, React Developer Tools, Vue.js devtools, Requestly, Ember Inspector and MobX Developer Tools list access to all sites. Solid DevTools lists no permissions in its source build but runs a content script on all sites. Requestly also asks for the proxy and webRequest permissions. Lighthouse asks only for activeTab and storage. Header Editor lists the debugger permission and access to all sites. Refined GitHub limits its host access to github.com and api.github.com. Read each install prompt.
• Privacy. Lighthouse's README says its reports are never sent to a remote server. For the other twelve, we could not read the developer's privacy policy when we checked; read it before installing.

Our picks at a glance

Which Chrome extension should I use to debug Redux state?

Redux DevTools. It shows each action and the state change that follows, and it lets you step back through past states. It is for Redux apps only, and your app needs Redux 3.1.0 or newer with the devtools enhancer set up. It is open source under MIT.

Which Chrome extension should I use to inspect React components?

React Developer Tools. It adds a panel to Chrome DevTools where you can look at the props and state of your React components. It is built by Meta Platforms and is open source under MIT. A separate standalone package covers React Native, embedded webviews and Safari.

Which extension helps me debug a Vue app?

Vue.js devtools. It adds a DevTools panel for Vue 3 apps and is open source under MIT. Version 7 and later support Vue 3 only, so a Vue 2 app needs the older v6 extension that the Vue docs link to.

Which extension helps me debug an Apollo Client app?

Apollo Client Devtools. It adds a panel with an Explorer for running queries, plus inspectors for watched queries, mutations and the cache. It is for GraphQL apps built with Apollo Client, not other clients. It supports the current minor version, with best effort for older 3.x and no 2.x.

Can I inspect a Preact app in Chrome?

Yes, with Preact Developer Tools. It shows the component tree, props and state. It needs Preact 10.1.0 or higher, and the app needs the Preact debug or devtools import. It is for Preact apps only, so it will not help you with a React project. It is open source under MIT.

How do I check a page's speed and quality?

Use Lighthouse. It runs from a popup on any page and checks performance, quality and correctness. Chrome now has Lighthouse in DevTools too, so the extension adds little if you already use that. It gives lab data from your own machine, not data from real visitors.

What is the easiest way to read JSON in Chrome?

JSON Formatter. Open a URL that returns JSON and it shows a collapsible tree with colors, clickable links and dark mode. You can switch to the raw text. It rounds numbers above 9007199254740991, so check very large numbers in the raw view.

How do I modify headers or mock requests while testing?

Requestly. You write rules, and it applies them as you browse: it can redirect URLs, modify headers and return mock responses. It can import rules from Charles Proxy, ModHeader and Resource Override. It asks for strong browser powers, so turn rules on while you debug and off when you finish. Code outside its ee folder is open source under AGPLv3.

Is there a rule-based extension that only edits headers and redirects?

Header Editor. You write rules, and it can modify request and response headers, redirect requests and cancel them, with no code. The Chrome Web Store build is the Lite version, with no custom functions. It is open source under GPL-2.0-or-later and asks for the debugger permission and access to all sites, so test new rules on one page.

Which extensions help me debug Solid, Ember or MobX apps?

Solid DevTools for SolidJS shows the reactivity graph once your app loads the solid-devtools package. Ember Inspector adds an Ember tab to DevTools. MobX Developer Tools tracks observables and shows the dependency tree. Each shows data only for its own framework. Solid DevTools and MobX Developer Tools have long gaps between releases.

Which extension makes GitHub easier to use?

Refined GitHub. It simplifies the GitHub interface and adds 100+ small improvements, such as one-click branch deletion and a single-click pull request from a branch. It works on GitHub.com only, and on GitHub Enterprise if you set it up. It is open source under MIT. Some features use a GitHub token you supply; give it the least access it needs.

Do developer extensions collect my data?

We could not read the privacy policy for Redux DevTools, JSON Formatter, Apollo Client Devtools, Preact Developer Tools, React Developer Tools, Vue.js devtools, Requestly, Solid DevTools, Ember Inspector, MobX Developer Tools, Refined GitHub or Header Editor; read it first. Header Editor’s README says “no data collection”, the developer’s own claim. Lighthouse's README says reports are never beaconed to a server.

Good to know

Match the tool to your stack before you install anything. A framework tool that does not match your app will sit empty and still ask for wide access. Also keep these in a separate Chrome profile for development if you want less access in your daily browsing.