基本设置

TanStack devtools 为您提供了一个易于使用且模块化的客户端，允许您将多个 devtools 组合到一个易于使用的面板中。

设置

安装 TanStack Devtools 库，这将安装 devtools 核心并为您提供特定于框架的适配器。

bash

npm i @tanstack/react-devtools

npm i @tanstack/react-devtools

接下来，在您的应用程序的根目录中，从所需的框架适配器（本例中为 @tanstack/react-devtools）导入 TanStackDevtools。

tsx

import { TanStackDevtools } from '@tanstack/react-devtools'

import App from './App'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />

    <TanStackDevtools />
  </StrictMode>,
)

import { TanStackDevtools } from '@tanstack/react-devtools'

import App from './App'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />

    <TanStackDevtools />
  </StrictMode>,
)

导入所需的 devtools，并将其与菜单标签一起提供给 TanStackDevtools 组件。

目前 TanStack 提供

QueryDevtools
RouterDevtools
PacerDevtools
FormDevtools 即将推出

tsx

import { createRoot } from 'react-dom/client'

import { TanStackDevtools } from '@tanstack/react-devtools'

import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
import { ReactFormDevtoolsPanel } from '@tanstack/react-form-devtools'


import App from './App'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />

    <TanStackDevtools
      plugins={[
        {
          name: 'TanStack Query',
          render: <ReactQueryDevtoolsPanel />,
        },
        {
          name: 'TanStack Router',
          render: <TanStackRouterDevtoolsPanel />,
        },
        {
          name: 'TanStack Form',
          render: <ReactFormDevtoolsPanel />,
        },
      ]}
    />
  </StrictMode>,
)

import { createRoot } from 'react-dom/client'

import { TanStackDevtools } from '@tanstack/react-devtools'

import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
import { ReactFormDevtoolsPanel } from '@tanstack/react-form-devtools'


import App from './App'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />

    <TanStackDevtools
      plugins={[
        {
          name: 'TanStack Query',
          render: <ReactQueryDevtoolsPanel />,
        },
        {
          name: 'TanStack Router',
          render: <TanStackRouterDevtoolsPanel />,
        },
        {
          name: 'TanStack Form',
          render: <ReactFormDevtoolsPanel />,
        },
      ]}
    />
  </StrictMode>,
)

最后，根据需要为 TanStackDevtools 组件添加任何其他配置，有关更多信息，请参阅 TanStack Devtools 配置部分。

您可以在我们的基本示例中找到一个完整的可运行示例。

设置

订阅 Bytes

订阅 Bytes