基本设置

TanStack devtools 为您提供了一个易于使用且模块化的客户端，允许您将多个 devtools 组合到一个易于使用的面板中。

设置

安装 TanStack Devtools 库，这将安装 devtools 核心并为您提供特定于框架的适配器。

bash

npm i @tanstack/solid-devtools

npm i @tanstack/solid-devtools

接下来，在您的应用程序的根目录中，从所需的框架适配器（在本例中为 @tanstack/solid-devtools）导入 TanStackDevtools。

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

导入所需的 devtools，并将其与菜单标签一起提供给 TanStackDevtools 组件。

目前 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')!);

最后，为 TanStackDevtools 组件添加您想要的任何其他配置，更多信息可在 TanStack Devtools 配置部分找到。

完整的可运行示例可在我们的示例部分找到。

设置

订阅 Bytes

订阅 Bytes