开发者工具（Devtools）

Chrome、Firefox 和 Edge 用户请注意：已有第三方浏览器扩展，可让你直接在浏览器开发者工具（DevTools）中调试 TanStack Query。这些扩展提供的功能与框架专用的开发者工具包完全相同：

• Devtools for Chrome
• Devtools for Firefox
• Devtools for Edge

安装并导入开发者工具

开发者工具是一个独立的软件包，你需要单独安装：

1npm i @tanstack/svelte-query-devtools

或

1pnpm add @tanstack/svelte-query-devtools

或

1yarn add @tanstack/svelte-query-devtools

或

1bun add @tanstack/svelte-query-devtools

你可以按如下方式导入开发者工具：

1import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools'

悬浮模式（Floating Mode）

悬浮模式会将开发者工具作为固定浮动元素挂载到你的应用中，并在屏幕角落提供一个开关按钮，用于显示或隐藏开发者工具。该开关状态将被保存至 localStorage，并在页面重载后保持。

请尽可能将以下代码放置在 Svelte 应用的顶层位置。越靠近页面根节点，效果越好！

1<script>2  import { QueryClientProvider } from '@tanstack/svelte-query'3  import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools'4</script>5 6<QueryClientProvider client={queryClient}>7  {/* The rest of your application */}8  <SvelteQueryDevtools />9</QueryClientProvider>

选项

• initialIsOpen: boolean
  • 若希望开发者工具默认处于打开状态，请将此 true 设为 true
• buttonPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right" | "relative"
  • 默认值为 bottom-right
  • 控制 TanStack 标志的位置，该标志用于打开和关闭开发者工具面板
  • 若设为 relative，按钮将出现在你渲染开发者工具组件的位置
• position?: "top" | "bottom" | "left" | "right"
  • 默认值为 bottom
  • 控制 Svelte Query 开发者工具面板的位置
• client?: QueryClient
  • 使用此选项可指定自定义的 QueryClient；否则将使用最近上下文中的 QueryClient
• errorTypes?: { name: string; initializer: (query: Query) => TError}[]
  • 使用此选项可预定义一些可在查询上触发的错误。当从 UI 中启用某个错误时，其初始化器（initializer）将被调用（传入对应查询），且必须返回一个 Error 实例
• styleNonce?: string
  • 使用此选项可向插入文档 head 的 style 标签传递一个 nonce。若你正在使用内容安全策略（CSP）nonce 来允许内联样式，则此选项非常有用
• shadowDOMTarget?: ShadowRoot
  • 默认行为是将开发者工具的样式应用到 DOM 的 head 标签中
  • 使用此选项可向开发者工具传入一个 Shadow DOM 目标，使样式被注入到 Shadow DOM 内，而非 Light DOM 的 head 标签中
• hideDisabledQueries?: boolean
  • 默认值为 false
  • 将此选项设为 true 可在开发者工具面板中隐藏已禁用的查询
• theme?: Theme
  • 默认值为开发者工具「设置」菜单中选定的主题；若未选择任何主题，则默认为 system
  • 设置此选项可更改开发者工具面板的主题，它将覆盖「设置」菜单中选定的主题