快速开始

TanStack Devtools 是一个框架无关的开发者工具，用于管理和调试 开发工具

要开始使用，请为您使用的框架安装正确的适配器

React: npm install @tanstack/react-devtools @tanstack/devtools-vite
Solid: npm install @tanstack/solid-devtools @tanstack/devtools-vite

然后将开发工具导入到您应用程序的根目录

javascript

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

function App() {
  return (
    <>
      <YourApp />
      <TanStackDevtools />
    </>
  )
}

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

function App() {
  return (
    <>
      <YourApp />
      <TanStackDevtools />
    </>
  )
}

并将 vite 插件作为插件数组中的第一个插件添加到您的 vite.config.ts 文件中

javascript

import { devtools } from '@tanstack/devtools-vite'

export default {
  plugins: [
    devtools(),
    // ... rest of your plugins here
  ],
}

import { devtools } from '@tanstack/devtools-vite'

export default {
  plugins: [
    devtools(),
    // ... rest of your plugins here
  ],
}

这样就完成了！如果您想添加自定义插件，可以使用 plugins prop 来实现

javascript

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

function App() {
  return (
    <>
      <YourApp />
      <TanStackDevtools plugins={[
        // Add your custom plugins here
      ]} />
    </>
  )
}

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

function App() {
  return (
    <>
      <YourApp />
      <TanStackDevtools plugins={[
        // Add your custom plugins here
      ]} />
    </>
  )
}

例如，如果您想添加 TanStack query & router，可以这样做

javascript

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

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <YourApp />
      <TanStackDevtools plugins={[
        {
          name: 'TanStack Query',
          render: <ReactQueryDevtoolsPanel />,
        },
        {
          name: 'TanStack Router',
          render: <TanStackRouterDevtoolsPanel />,
        },
      ]} />
    </QueryClientProvider>
  )
}

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

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <YourApp />
      <TanStackDevtools plugins={[
        {
          name: 'TanStack Query',
          render: <ReactQueryDevtoolsPanel />,
        },
        {
          name: 'TanStack Router',
          render: <TanStackRouterDevtoolsPanel />,
        },
      ]} />
    </QueryClientProvider>
  )
}

订阅 Bytes

订阅 Bytes