--- id: devtools title: Devtools --- Wave your hands in the air and shout hooray because React Query comes with dedicated devtools! 🥳 When you begin your React Query journey, you'll want these devtools by your side. They help visualize all the inner workings of React Query and will likely save you hours of debugging if you find yourself in a pinch! > For Chrome, Firefox, and Edge users: Third-party browser extensions are available for debugging TanStack Query directly in browser DevTools. These provide the same functionality as the framework-specific devtools packages: > > -

[Devtools for Chrome](https://chromewebstore.google.com/detail/tanstack-query-devtools/annajfchloimdhceglpgglpeepfghfai) > -

[Devtools for Firefox](https://addons.mozilla.org/en-US/firefox/addon/tanstack-query-devtools/) > -

[Devtools for Edge](https://microsoftedge.microsoft.com/addons/detail/tanstack-query-devtools/edmdpkgkacmjopodhfolmphdenmddobj) > For React Native users: A third-party native macOS app is available for debugging React Query in ANY js-based application. Monitor queries across devices in real-time. Check it out here: [rn-better-dev-tools](https://github.com/LovesWorking/rn-better-dev-tools) > Note that since version 5, the dev tools support observing mutations as well. ## Install and Import the Devtools The devtools are a separate package that you need to install: ```bash npm i @tanstack/react-query-devtools ``` or ```bash pnpm add @tanstack/react-query-devtools ``` or ```bash yarn add @tanstack/react-query-devtools ``` or ```bash bun add @tanstack/react-query-devtools ``` For Next 13+ App Dir you must install it as a dev dependency for it to work. You can import the devtools like this: ```tsx import { ReactQueryDevtools } from '@tanstack/react-query-devtools' ``` By default, React Query Devtools are only included in bundles when `process.env.NODE_ENV === 'development'`, so you don't need to worry about excluding them during a production build. ## Floating Mode Floating Mode will mount the devtools as a fixed, floating element in your app and provide a toggle in the corner of the screen to show and hide the devtools. This toggle state will be stored and remembered in localStorage across reloads. Place the following code as high in your React app as you can. The closer it is to the root of the page, the better it will work! ```tsx import { ReactQueryDevtools } from '@tanstack/react-query-devtools' function App() { return ( {/* The rest of your application */} ) } ``` ### Options - `initialIsOpen: boolean` - Set this `true` if you want the dev tools to default to being open - `buttonPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right" | "relative"` - Defaults to `bottom-right` - The position of the React Query logo to open and close the devtools panel - If `relative`, the button is placed in the location that you render the devtools. - `position?: "top" | "bottom" | "left" | "right"` - Defaults to `bottom` - The position of the React Query devtools panel - `client?: QueryClient`, - Use this to use a custom QueryClient. Otherwise, the one from the nearest context will be used. - `errorTypes?: { name: string; initializer: (query: Query) => TError}[]` - Use this to predefine some errors that can be triggered on your queries. Initializer will be called (with the specific query) when that error is toggled on from the UI. It must return an Error. - `styleNonce?: string` - Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles. - `shadowDOMTarget?: ShadowRoot` - Default behavior will apply the devtool's styles to the head tag within the DOM. - Use this to pass a shadow DOM target to the devtools so that the styles will be applied within the shadow DOM instead of within the head tag in the light DOM. ## Embedded Mode Embedded mode will show the development tools as a fixed element in your application, so you can use our panel in your own development tools. Place the following code as high in your React app as you can. The closer it is to the root of the page, the better it will work! ```tsx import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools' function App() { const [isOpen, setIsOpen] = React.useState(false) return ( {/* The rest of your application */} {isOpen && setIsOpen(false)} />} ) } ``` ### Options - `style?: React.CSSProperties` - Custom styles for the devtools panel - Default: `{ height: '500px' }` - Example: `{ height: '100%' }` - Example: `{ height: '100%', width: '100%' }` - `onClose?: () => unknown` - Callback function that is called when the devtools panel is closed - `client?: QueryClient`, - Use this to use a custom QueryClient. Otherwise, the one from the nearest context will be used. - `errorTypes?: { name: string; initializer: (query: Query) => TError}[]` - Use this to predefine some errors that can be triggered on your queries. Initializer will be called (with the specific query) when that error is toggled on from the UI. It must return an Error. - `styleNonce?: string` - Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles. - `shadowDOMTarget?: ShadowRoot` - Default behavior will apply the devtool's styles to the head tag within the DOM. - Use this to pass a shadow DOM target to the devtools so that the styles will be applied within the shadow DOM instead of within the head tag in the light DOM. ## Devtools in production Devtools are excluded in production builds. However, it might be desirable to lazy load the devtools in production: ```tsx import * as React from 'react' import { QueryClient, QueryClientProvider } from '@tanstack/react-query' import { ReactQueryDevtools } from '@tanstack/react-query-devtools' import { Example } from './Example' const queryClient = new QueryClient() const ReactQueryDevtoolsProduction = React.lazy(() => import('@tanstack/react-query-devtools/build/modern/production.js').then( (d) => ({ default: d.ReactQueryDevtools, }), ), ) function App() { const [showDevtools, setShowDevtools] = React.useState(false) React.useEffect(() => { // @ts-expect-error window.toggleDevtools = () => setShowDevtools((old) => !old) }, []) return ( {showDevtools && ( )} ) } export default App ``` With this, calling `window.toggleDevtools()` will download the devtools bundle and show them. ### Modern bundlers If your bundler supports package exports, you can use the following import path: ```tsx const ReactQueryDevtoolsProduction = React.lazy(() => import('@tanstack/react-query-devtools/production').then((d) => ({ default: d.ReactQueryDevtools, })), ) ``` For TypeScript, you would need to set `moduleResolution: 'nodenext'` in your tsconfig, which requires at least TypeScript v4.7.