配置 | TanStack Devtools 文档

TanStack DevTools 和 EventClient 都可以进行配置。

重要

所有配置项均为可选，除非标明（必填）

Devtools 组件配置

无论使用哪种框架，Devtools 组件都有两个相同的配置属性。

config - 用于 devtool 面板和与其交互的配置。
eventBusConfig - 用于事件总线的配置。

config 对象主要围绕用户与 devtools 面板的交互，并接受以下属性：

defaultOpen - devtools 是否默认打开

{ defaultOpen: boolean }

{ defaultOpen: boolean }

hideUntilHover - 鼠标悬停前隐藏 TanStack devtools 触发器

{ hideUntilHover: boolean }

{ hideUntilHover: boolean }

position - TanStack devtools 触发器的位置

{ position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'middle-left' | 'middle-right' }

{ position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'middle-left' | 'middle-right' }

panelLocation - devtools 面板的位置

{ panelLocation: 'top' | 'bottom' }

{ panelLocation: 'top' | 'bottom' }

openHotkey - 用于打开 devtools 的快捷键

type ModifierKey = 'Alt' | 'Control' | 'Meta' | 'Shift';
type KeyboardKey = ModifierKey | (string & {});

{ openHotkey: Array<KeyboardKey> }

type ModifierKey = 'Alt' | 'Control' | 'Meta' | 'Shift';
type KeyboardKey = ModifierKey | (string & {});

{ openHotkey: Array<KeyboardKey> }

requireUrlFlag - 要求 URL 中存在某个标志才能启用 devtools

{ requireUrlFlag: boolean }

{ requireUrlFlag: boolean }

urlFlag - 启用 devtools 所必需的 URL 标志。

{ urlFlag: string }

{ urlFlag: string }

eventBusConfig 是 devtools 底层 `EventBus` 的配置，并接受以下属性：

debug - 启用 EventBus 的调试模式

{ debug: boolean }

{ debug: boolean }

connectToServerBus - 可选标志，指示 devtools 服务器事件总线是否可用以连接

{ connectToServerBus: boolean }

{ connectToServerBus: boolean }

port - 客户端连接 devtools 服务器事件总线的端口

{ port: number }

{ port: number }

以下是一个 React 示例

tsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { FormDevtools } from '@tanstack/react-form'

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

import App from './App'

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

    <TanStackDevtools
      config={{ hideUntilHover: true,  }}
      eventBusConfig={{ debug: true }}
      plugins={[
        {
          name: 'TanStack Form',
          render: <FormDevtools />,
        },
      ]}
    />
  </StrictMode>,
)

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { FormDevtools } from '@tanstack/react-form'

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

import App from './App'

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

    <TanStackDevtools
      config={{ hideUntilHover: true,  }}
      eventBusConfig={{ debug: true }}
      plugins={[
        {
          name: 'TanStack Form',
          render: <FormDevtools />,
        },
      ]}
    />
  </StrictMode>,
)

EventClient 配置

EventClient 的配置如下：

pluginId (必填) - 事件总线用于将事件定向到监听器的插件标识符

{pluginId: string}

{pluginId: string}

debug - 启用 EventClient 的调试模式

{debug: boolean}

{debug: boolean}

将 EventClient 配置放在一起是这样的：

tsx

import { EventClient } from '@tanstack/devtools-event-client'

type EventMap = {
  'custom-devtools:custom-state': { state: string }
}

class customEventClient extends EventClient<EventMap> {
  constructor() {
    super({
      debug: true,
      pluginId: 'custom-devtools',
    })
  }
}

import { EventClient } from '@tanstack/devtools-event-client'

type EventMap = {
  'custom-devtools:custom-state': { state: string }
}

class customEventClient extends EventClient<EventMap> {
  constructor() {
    super({
      debug: true,
      pluginId: 'custom-devtools',
    })
  }
}

有关 EventClient 配置的更多信息，请参阅我们的自定义插件示例。

配置

Devtools 组件配置

EventClient 配置

订阅 Bytes

订阅 Bytes