A professional browser extension for debugging TanStack Query applications across all frameworks.
- Real-time Query Inspection - Live monitoring of all queries and mutations with instant state updates
- Interactive Data Editing - Edit query data directly in DevTools using professional JsonView interface
- State Manipulation - Trigger loading and error states for comprehensive UI testing
- Complete Cache Management - Invalidate, refetch, reset, and remove queries with one-click actions
- Mutation Tracking - Monitor mutations with variables, status, and result inspection
-
Install the extension from your browser's extension store:
-
Setup your application to expose the query client globally:
const queryClient = new QueryClient({ /* ... */ }); // This code is only for TypeScript declare global { interface Window { __TANSTACK_QUERY_CLIENT__: import("@tanstack/query-core").QueryClient; } } // This code is for all users window.__TANSTACK_QUERY_CLIENT__ = queryClient;
-
Open browser DevTools (F12) in your application
-
Navigate to the "TanStack Query" tab
-
Start debugging with real-time query inspection!
Web Application (TanStack Query)
↓ Detection & State Extraction
Injected Script (Application Context)
↓ Message Passing
Content Script (Bridge)
↓ Browser APIs
Background Service Worker
↓ DevTools Connection
React DevTools Panel
# Install dependencies
npm install
# Build extension
npm run build
# Load extension in your browser
# Chrome: chrome://extensions/ → Enable "Developer mode" → "Load unpacked" → Select `dist` folder
# Firefox: about:debugging → "This Firefox" → "Load Temporary Add-on" → Select `dist/manifest.json`
# Edge: edge://extensions/ → Enable "Developer mode" → "Load unpacked" → Select `dist` folder