Devtools | TanStack Pacer 文档

什么？我的防抖函数竟然有专属的 Devtools？没错！

TanStack Pacer 提供了 Devtools，用于实时调试和监控您所有的工具。Devtools 可无缝集成到新的 TanStack Devtools 多面板 UI 中。

注意

默认情况下，TanStack Devtools 和 TanStack Pacer Devtools 将仅包含在开发模式下。这有助于保持您的生产包体积最小。如果您需要在生产构建中包含 Devtools（例如，用于调试生产问题），您可以使用替代的“生产”导入。

安装

为您的框架安装 Devtools 包

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

基本设置

React 设置

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 设置

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

生产构建

默认情况下，Devtools 会从生产构建中排除，以最小化包体积。默认导入在生产环境中将返回空操作实现。

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'

如果您需要在生产构建中包含 Devtools（例如，用于调试生产问题），请使用特定于生产环境的导入。

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'

注册工具

每个工具都应该被自动检测并显示在 Devtools 中。但是，如果您没有为该工具提供 key 选项，它将显示一个 UUID 作为其名称。使用 key 选项为其赋予一个可识别的名称。

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

开发工具

安装