Devtools

Was? Mein Debouncer kann dedizierte Devtools haben? Ja!

TanStack Pacer bietet Devtools zum Debuggen und Überwachen all Ihrer Hilfsprogramme in Echtzeit. Die Devtools integrieren sich nahtlos in die neue TanStack Devtools Multi-Panel-Benutzeroberfläche.

Hinweis

Standardmäßig sind die TanStack Devtools und die TanStack Pacer Devtools nur im Entwicklungsmodus enthalten. Dies hilft, die Größe Ihres Produktionspakets minimal zu halten. Wenn Sie Devtools in Produktions-Builds einbeziehen müssen (z. B. zum Debuggen von Produktionsproblemen), können Sie die alternativen "Produktions"-Imports verwenden.

Installation

Installieren Sie die Devtools-Pakete für Ihr Framework

React

npm install @tanstack/react-devtools @tanstack/react-pacer-devtools

npm install @tanstack/react-devtools @tanstack/react-pacer-devtools

Solid

npm install @tanstack/solid-devtools @tanstack/solid-pacer-devtools

npm install @tanstack/solid-devtools @tanstack/solid-pacer-devtools

Grundlegende Einrichtung

React-Einrichtung

tsx

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

function App() {
  return (
    <div>
      {/* Your app content */}
      
      <TanStackDevtools
        eventBusConfig={{
          debug: false,
        }}
        plugins={[{ name: 'TanStack Pacer', render: <PacerDevtoolsPanel /> }]}
      />
    </div>
  )
}

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

function App() {
  return (
    <div>
      {/* Your app content */}
      
      <TanStackDevtools
        eventBusConfig={{
          debug: false,
        }}
        plugins={[{ name: 'TanStack Pacer', render: <PacerDevtoolsPanel /> }]}
      />
    </div>
  )
}

Solid-Einrichtung

tsx

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

function App() {
  return (
    <div>
      {/* Your app content */}
      
      <TanStackDevtools
        eventBusConfig={{
          debug: false,
        }}
        plugins={[{ name: 'TanStack Pacer', render: <PacerDevtoolsPanel /> }]}
      />
    </div>
  )
}

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

function App() {
  return (
    <div>
      {/* Your app content */}
      
      <TanStackDevtools
        eventBusConfig={{
          debug: false,
        }}
        plugins={[{ name: 'TanStack Pacer', render: <PacerDevtoolsPanel /> }]}
      />
    </div>
  )
}

Produktions-Builds

Standardmäßig sind Devtools aus Produktions-Builds ausgeschlossen, um die Paketgröße zu minimieren. Die Standard-Imports geben im Produktionsmodus No-Op-Implementierungen zurück

tsx

// This will be a no-op in production builds
import { PacerDevtoolsPanel } from '@tanstack/react-pacer-devtools'

// This will be a no-op in production builds
import { PacerDevtoolsPanel } from '@tanstack/react-pacer-devtools'

Wenn Sie Devtools in Produktions-Builds einbeziehen müssen (z. B. zum Debuggen von Produktionsproblemen), verwenden Sie die spezifischen Produktions-Imports

tsx

// This will include full devtools even in production builds
import { PacerDevtoolsPanel } from '@tanstack/react-pacer-devtools/production'

// This will include full devtools even in production builds
import { PacerDevtoolsPanel } from '@tanstack/react-pacer-devtools/production'

Registrierung von Hilfsprogrammen

Jedes Hilfsprogramm sollte automatisch erkannt und in den Devtools angezeigt werden. Wenn Sie dem Hilfsprogramm jedoch keine key-Option zur Verfügung stellen, wird es mit einer UUID als Namen angezeigt. Geben Sie ihm mit der key-Option einen identifizierbaren Namen.

tsx

const debouncer = new Debouncer(myDebounceFn, {
  key: 'My Debouncer', // friendly name for the utility instead of auto-generated uuid
  wait: 1000,
})

const debouncer = new Debouncer(myDebounceFn, {
  key: 'My Debouncer', // friendly name for the utility instead of auto-generated uuid
  wait: 1000,
})