用途:TanStack Devtools 应用接入(App Setup),用于在应用中安装并挂载 TanStack Devtools,选择框架适配器并按需注册插件,配置开发者工具外壳行为。
主要能力:支持 React、Vue、Solid、Preact 适配器;插件通过 plugins 属性注册,每项需 name(字符串)及 render(JSX 元素或渲染函数);可传入 config 配置默认展开、悬浮触发、位置、面板位置、快捷键、URL 参数门槛、主题、隐藏触发器等;可通过 eventBusConfig 配置事件总线(调试、连接服务端总线、端口)。设置会持久化到 localStorage(键:tanstack_devtools_settings、tanstack_devtools_state)。
必要用法:以 devDependencies 安装,例如 npm install -D @tanstack/react-devtools @tanstack/devtools-vite;在应用根部挂载 TanStackDevtools。Vue 使用 @tanstack/vue-devtools,插件使用 component(非 render),类型为 TanStackDevtoolsVuePlugin;Solid 用 @tanstack/solid-devtools,Preact 用 @tanstack/preact-devtools。Vite 插件 @tanstack/devtools-vite 必须放在 plugins 数组首位,以便在框架插件之前进行源码注入;建议所有 devtools 包保持同一版本。
适用场景:本地开发中查看 Query、Router、Form 等面板;通过 requireUrlFlag 在暂存环境或团队内部调试时按 URL 参数启用;按插件 defaultOpen 控制初始标签。
限制:SSR 自定义场景需客户端守卫(typeof window !== 'undefined' 或动态导入),因核心外壳依赖 DOM API;Vue 用 render 会静默失败;仅开发使用时若仍作为普通依赖安装会增大生产包体积;价格与收费情况暂未提供。