Apollo Client Devtools: GraphQL Browser Extension
Apollo Client Devtools is the official browser extension for inspecting a running Apollo Client app, adding an Apollo tab beside Elements and Console. Reach for it when you're chasing a stale cache entry or a mutation that fired with the wrong variables — the cache inspector beats sprinkling console.log statements everywhere. Skip it if your app runs Apollo Client 2.x, since the maintainers don't support that version anymore.
What are Apollo Client Devtools?
Apollo Client Devtools is a browser extension for Chrome and Firefox that adds an 'Apollo' tab to your browser's developer tools inspector, next to Elements and Console. It ships four panels: an Explorer for running GraphQL queries against your app's own network interface, a watched query inspector, a mutation inspector, and a cache inspector for browsing the Apollo Client cache by field name or value.
Core Debugging Capabilities
- ✓Explorer: an embedded Apollo Studio Explorer that queries your GraphQL server through your app's own network interface, with no extra configuration.
- ✓Watched query inspector: lists every active query with its variables and cached result, and lets you re-run a single query on demand.
- ✓Mutation inspector: shows fired mutations with their variables and lets you re-run an individual mutation.
- ✓Cache inspector: visualizes the entire Apollo Client cache and lets you search it by field name or value.
- ✓Lives as an 'Apollo' tab inside your browser's own devtools panel, next to Elements and Console — no separate window to manage.
- ✓Built with TypeScript and tested with Jest and React Testing Library, per the repo's own test setup.
Getting Started: Browser Installation
Chrome users install Apollo Client Devtools from the Chrome Web Store listing (the extension ID is jdkknkkbebbapilgoeccciglkfbmbnfm). Opera users get it through the Chrome Web Store via the 'Download Chrome Extension' addon for Opera. Firefox users install it from Firefox Browser Add-ons. To build a local version instead, clone the repo, run `npm install`, then `npm run build -- --env TARGET=chrome` or `npm run build -- --env TARGET=firefox` — or run `npm run dist:chrome` / `npm run dist:firefox` to produce a zipped distributable.
Enabling Devtools in Your Application
In development, the Apollo tab appears automatically — Apollo Client attaches a global `window.__APOLLO_CLIENT__` hook by default whenever `process.env.NODE_ENV` isn't set to `production`. In production builds that hook is skipped, so the tab won't show up unless you do one of two things: pass `connectToDevTools: true` to the ApolloClient constructor, or manually attach your client instance to `window.__APOLLO_CLIENT__` yourself. Pass `connectToDevTools: false` if you want to force the hook off even outside production.
Who Benefits from These Devtools?
Apollo Client Devtools is for anyone building a web app on top of Apollo Client 3.x who needs to see what the client is actually doing — which queries are active, what's sitting in the cache, and which mutations just fired. It suits day-to-day debugging by the app's own developers more than a QA or support workflow, since using it well means reading Apollo Client's own query/mutation/cache model, not just clicking through a generic network panel.
Strengths
- ✓Runs against your app's real, already-authenticated network interface in the Explorer panel, so you're not copy-pasting a token into a separate GraphQL client.
- ✓Cache inspector lets you search the Apollo Client cache by field name or value instead of dumping the whole cache object to the console.
- ✓Installs in one click from the Chrome Web Store or Firefox Browser Add-ons — no build step for the common case.
- ✓MIT-licensed and maintained by the Apollo team itself, with a public GitHub repo (1528 stars, 173 forks) rather than a community fork.
Apollo Client Version Compatibility
- △No support for Apollo Client 2.x — the maintainers explicitly say they don't support that version with the devtools.
- △Older Apollo Client 3.x releases only get best-effort support; the recommended fix for compatibility issues is upgrading to the current minor release.
- △In production, the devtools stay invisible unless you deliberately expose `window.__APOLLO_CLIENT__` or pass `connectToDevTools: true` — easy to forget and then wonder why the Apollo tab is missing.
- △The four panels (Explorer, watched queries, mutations, cache) are fixed — the README doesn't mention a plugin or extension system for adding custom panels.
Other GraphQL Debugging Options
Common Questions
Install Apollo Client Devtools for Chrome by visiting its Chrome Web Store listing and clicking add to Chrome; Opera users can get the same extension through the Chrome Web Store using the Download Chrome Extension addon for Opera.
Apollo Client Devtools has a dedicated Firefox build, installed from Firefox Browser Add-ons rather than the Chrome Web Store.
Apollo Client Devtools actively supports the current minor release of Apollo Client, does its best to support older 3.x releases, and does not support Apollo Client 2.x at all.
Enable Apollo Client Devtools in production by passing `connectToDevTools: true` to the ApolloClient constructor, or by manually attaching your client instance to `window.__APOLLO_CLIENT__`, since that hook is normally skipped outside development.
Apollo Client Devtools can be built locally: clone the repo, run `npm install`, then `npm run build -- --env TARGET=chrome` (or `TARGET=firefox`), or run `npm run dist:chrome` / `npm run dist:firefox` for a zipped distributable.
Apollo Client Devtools is released under the MIT license, the same permissive license listed in the GitHub repo's metadata.
The problem it solves
When an Apollo Client app returns the wrong data, the usual first move is console.log-ing the client's cache or watched queries by hand, then deleting those lines before committing. Apollo Client Devtools solves that by giving GraphQL state — active queries, their cached results, and fired mutations — its own tab in the browser inspector, so a developer can watch the cache change in real time instead of guessing from network tab JSON.
Best use cases
- •Tracking down why a query is returning stale data by inspecting its cached result directly in the cache inspector.
- •Verifying a mutation actually fired with the variables you expected, instead of adding temporary console.log calls.
- •Exploring an unfamiliar GraphQL API from inside the app that's already authenticated, using the Explorer panel's network interface.
- •Confirming the Apollo Client cache holds (or doesn't hold) a specific field before writing a cache update function.