A browser extension for debugging TanStack Query applications.
Inspect queries, mutations, and cache state — in real time.
- Live query & mutation inspection — see every query and mutation in your app update in real time
- Detailed view — drill into individual queries and mutations to see their status, data, and metadata
- Data tree viewer — explore query/mutation data as an interactive, expandable tree
- Inline data editing — modify cached query data directly from the devtools
- Cache actions — invalidate, refetch, reset, or remove queries; clear the mutation cache
- Status badges — at-a-glance status indicators (fresh, stale, fetching, paused, inactive, error)
- Search & sort — filter queries/mutations by key and sort by key, status, or last updated time
- Popup & DevTools panel — use as a standalone popup or as a panel inside browser DevTools
- Cross-browser — works on Chrome, Firefox, and Edge
Install directly from one of the browser add-on stores:
The extension connects to your app by reading window.__TANSTACK_QUERY_CLIENT__. Add this to your app's entry point (e.g. main.ts / main.tsx):
const queryClient = new QueryClient({
/* ... */
});
// TypeScript users: add the type declaration
declare global {
interface Window {
__TANSTACK_QUERY_CLIENT__: import("@tanstack/query-core").QueryClient;
}
}
window.__TANSTACK_QUERY_CLIENT__ = queryClient;- Navigate to your app in the browser.
- The extension icon in the toolbar turns colored when a
QueryClientis detected. - Click the icon to open the popup, or open DevTools → TanStack Query panel for the full experience.
# Clone the repo
git clone https://github.com/DeeCode-inc/tanstack-query-chrome-devtools.git
cd tanstack-query-chrome-devtools
# Install dependencies
npm install
# Start dev server (Chrome)
npm run dev
# Start dev server (Firefox)
npm run dev:firefox# Production build (Chrome)
npm run build
# Production build (Firefox)
npm run build:firefox
# Package as .zip for store submission
npm run zip
npm run zip:firefox| Command | Description |
|---|---|
npm run lint |
Run ESLint |
npm run prettier:check |
Check formatting |
npm run prettier:format |
Auto-format all files |
npm run compile |
Type-check with TypeScript |
- WXT — next-gen browser extension framework
- React 19 — UI
- Tailwind CSS 4 — styling
- TypeScript — type safety
- @tanstack/query-core — query type definitions
The extension consists of three main parts:
| Component | Description |
|---|---|
| Content scripts | Injected into web pages to detect TanStack Query and relay cache state |
| Background service worker | Routes messages between content scripts and UI surfaces |
| UI (Panel / Popup) | React app that renders the devtools interface |
Data flows from the page's QueryClient through content scripts → background → panel/popup via port-based messaging with snapshot + incremental update semantics.
Contributions are welcome! Please open an issue first to discuss what you'd like to change.
- Fork the repository
- Create a feature branch (
git checkout -b feat/my-feature) - Commit your changes (
git commit -m 'feat: add my feature') - Push to the branch (
git push origin feat/my-feature) - Open a Pull Request
Built by Dmytro Borysov