Schnellstart

TanStack Devtools ist ein Framework-unabhängiges Devtool zum Verwalten und Debuggen von Devtool Devtools

Um loszulegen, installieren Sie den richtigen Adapter für Ihr Framework

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

Importieren Sie dann die Devtools in die Wurzel Ihrer Anwendung

javascript

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

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

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

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

Und binden Sie das Vite-Plugin als erstes Plugin in Ihrem Plugin-Array in vite.config.ts ein

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
  ],
}

Und das war's! Wenn Sie benutzerdefinierte Plugins hinzufügen möchten, können Sie dies über die Prop plugins tun

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
      ]} />
    </>
  )
}

Wenn Sie beispielsweise TanStack Query & Router hinzufügen möchten, könnten Sie dies auf folgende Weise tun

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 abonnieren

Bytes abonnieren