Debug TanStack Query without shipping devtools to production. See every query and mutation the moment it changes — cache state, status transitions, full data payloads — from your browser toolbar or right inside DevTools. No package to install, no bundle to grow, nothing to strip before release. WHAT YOU GET

Live inspection — queries and mutations update in real time as your app runs
Deep dive — status, data, and metadata for any single query or mutation
Interactive data tree — expand, collapse, and explore deeply nested payloads
Inline editing — change cached data on the spot and watch your UI react
One-click cache actions — invalidate, refetch, reset, or remove queries; clear the mutation cache
Status at a glance — fresh, stale, fetching, paused, inactive, error
Search & sort — find any query by key; sort by key, status, or last updated
Two ways to work — toolbar popup for a quick peek, DevTools panel for a real session
Stays connected — survives page navigation within the tab

SETUP IS ONE LINE

window.__TANSTACK_QUERY_CLIENT__ = queryClient;

Reload your app. The toolbar icon lights up the moment a QueryClient is detected. Click it for the popup, or open DevTools → TanStack Query for the full panel. WHY NOT THE BUILT-IN DEVTOOLS?

Zero bundle impact — nothing ships to production, ever
Framework-agnostic — React, Vue, Solid, Svelte, Angular: if it runs TanStack Query, it works
Sits alongside your other DevTools panels instead of floating over your app
No conditional imports, no tree-shaking tricks, no cleanup before release

Free and open source (MIT): github.com/DeeCode-inc/tanstack-query-chrome-devtools