SuperAPI AI 工具集

tanstack-devtools-app-setup

前端与建站

查看项目

更新于 10-16 00:02

技能介绍

用途:在 React、Vue、Solid、Preact 应用中接入 TanStack Devtools 调试面板,集中展示各 TanStack 库的调试插件。

主要能力:支持多框架适配;通过 plugins 属性注册插件,每个插件需 name 与 render(Vue 用 component);可配置外壳行为,如 defaultOpen、hideUntilHover、position、panelLocation、openHotkey、inspectHotkey、requireUrlFlag、urlFlag、theme、triggerHidden;可通过 eventBusConfig 配置客户端事件总线(debug、connectToServerBus、port),服务端事件总线需 @tanstack/devtools-vite 运行;插件项支持 defaultOpen;可用 requireUrlFlag 仅在带指定 URL 参数时显示。

使用方式:以开发依赖安装,例如 npm install -D @tanstack/react-devtools @tanstack/devtools-vite(Vue 为 @tanstack/vue-devtools,Solid 为 @tanstack/solid-devtools,Preact 为 @tanstack/preact-devtools),在应用根部渲染 TanStackDevtools 并传入 plugins。配置值首次加载后持久化到 localStorage,键为 tanstack_devtools_settings 与 tanstack_devtools_state。

限制与注意:Vue 适配器必须用 component 而非 render,否则插件标签出现但无内容;@tanstack/devtools-vite 必须放在 Vite plugins 数组首位;SSR 环境需客户端守卫(如 typeof window !== 'undefined')或动态导入;仅开发使用时安装为 devDependencies;所有 @tanstack/devtools-* 包应保持同版本更新,自定义插件需使 @tanstack/devtools-event-client 与外壳所用 @tanstack/devtools 版本一致。