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:

• Chrome Web Store
• Firefox Add-ons
• Edge Add-ons

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;

1. Navigate to your app in the browser.
2. The extension icon in the toolbar turns colored when a QueryClient is detected.
3. Click the icon to open the popup, or open DevTools → TanStack Query panel for the full experience.

• Node.js (LTS recommended)
• pnpm

# Clone the repo
git clone https://github.com/DeeCode-inc/tanstack-query-chrome-devtools.git
cd tanstack-query-chrome-devtools

# Install dependencies
pnpm install

# Start dev server (Chrome)
pnpm dev

# Start dev server (Firefox)
pnpm dev:firefox

# Production build (Chrome)
pnpm build

# Production build (Firefox)
pnpm build:firefox

# Package as .zip for store submission
pnpm zip
pnpm zip:firefox

• WXT — next-gen browser extension framework
• React 19 — UI
• Tailwind CSS 4 — styling
• TypeScript — type safety
• Oxlint and Oxfmt — linting and formatting
• @tanstack/query-core — query type definitions

The extension consists of three main parts:

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.

1. Fork the repository
2. Create a feature branch (git checkout -b feat/my-feature)
3. Commit your changes (git commit -m 'feat: add my feature')
4. Push to the branch (git push origin feat/my-feature)
5. Open a Pull Request

Built by Dmytro Borysov