Grundlegende Einrichtung

TanStack Devtools bietet Ihnen ein einfach zu bedienendes und modulares Client, das es Ihnen ermöglicht, mehrere Devtools zu einem einfach zu bedienenden Panel zu komponieren.

Einrichtung

Installieren Sie die TanStack Devtools Bibliothek. Dies installiert den Devtools-Kern und stellt Ihnen Framework-spezifische Adapter zur Verfügung.

bash

npm i @tanstack/solid-devtools

npm i @tanstack/solid-devtools

Importieren Sie als Nächstes im Stammverzeichnis Ihrer Anwendung die TanStackDevtools aus dem erforderlichen Framework-Adapter (in diesem Fall @tanstack/solid-devtools).

tsx

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

import App from './App'

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

    <TanStackDevtools />
  </StrictMode>,
)

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

import App from './App'

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

    <TanStackDevtools />
  </StrictMode>,
)

Importieren Sie die gewünschten Devtools und übergeben Sie sie an die TanStackDevtools Komponente zusammen mit einem Label für das Menü.

Derzeit bietet TanStack

QueryDevtools
RouterDevtools
FormDevtools

tsx

import { render } from 'solid-js/web';

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

import { SolidQueryDevtoolsPanel } from '@tanstack/solid-query-devtools'
import { TanStackRouterDevtoolsPanel } from '@tanstack/solid-router-devtools'
import { SolidFormDevtoolsPanel } from '@tanstack/solid-form'

import App from './App'

render(() => (
  <>
    <App />

    <TanStackDevtools
      plugins={[
        {
          name: 'TanStack router',
          render: () => <TanStackRouterDevtoolsPanel />,
        },
        {
          name: 'TanStack Form',
          render: () => <SolidFormDevtoolsPanel />,
        },
      ]}
    />
  </>
), document.getElementById('root')!);

import { render } from 'solid-js/web';

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

import { SolidQueryDevtoolsPanel } from '@tanstack/solid-query-devtools'
import { TanStackRouterDevtoolsPanel } from '@tanstack/solid-router-devtools'
import { SolidFormDevtoolsPanel } from '@tanstack/solid-form'

import App from './App'

render(() => (
  <>
    <App />

    <TanStackDevtools
      plugins={[
        {
          name: 'TanStack router',
          render: () => <TanStackRouterDevtoolsPanel />,
        },
        {
          name: 'TanStack Form',
          render: () => <SolidFormDevtoolsPanel />,
        },
      ]}
    />
  </>
), document.getElementById('root')!);

Fügen Sie abschließend alle zusätzlichen gewünschten Konfigurationen zur TanStackDevtools Komponente hinzu. Weitere Informationen finden Sie im Abschnitt TanStack Devtools Konfiguration.

Ein vollständiges funktionierendes Beispiel finden Sie in unserem Beispielbereich.

Einrichtung

Bytes abonnieren

Bytes abonnieren