如果你用过 TanStack Query（以前叫 React Query），一定知道它自带的 DevTools 组件。但那个组件要装进项目里，打包到生产环境，总有点不放心。最近发现了 TanStack Query DevTools 这个浏览器插件，试了一次就回不去了——它能让你在浏览器开发者工具面板里直接查看查询、突变的实时状态，完全不碰源码。

为什么推荐这款插件

最大的感受是安全：插件只在开发时启用，生产环境根本不会加载任何额外代码。你只需要在开发环境把 QueryClient 挂到 window 上（一行代码），插件图标就会亮起，点击就能弹窗或进入专属面板。

  • 实时监控查询和突变：打开面板，所有查询和突变按时间排列，状态一目了然：fresh、stale、fetching、error…… 点击任意一个，能看到完整的 data、error、metadata，甚至可以展开树形结构看嵌套对象。
  • 直接操作缓存：觉得某个查询数据不对？插件里直接点“invalidate”或“refetch”，不用切回代码改逻辑；还能直接修改缓存里的 data，测试各种边界情况。
  • 搜索与排序：项目大了查询堆成山？按 query key 搜索，或者按状态、更新时间排序，很快找到目标。

和内置 DevTools 的对比

以前项目里用内置的 ReactQueryDevtools，虽然也能看缓存，但总要装依赖、打包，而且在生产环境需要额外判断是否加载。这个插件完全不需要改代码（除了那句 expose），面板还跟 Chrome 原生 DevTools 集成在一起，切换面板非常顺手。另外，它支持 Vue、Solid、Angular、Svelte 等所有 TanStack Query 的端口，不局限于 React。

使用中的小细节

设置非常简单：在启动 QueryClient 之后，window.TANSTACK_QUERY_CLIENT = queryClient 即可。插件检测到后图标变彩色。弹出窗口和 DevTools 面板都能用，面板里还支持跨页面导航保持状态，不用重新初始化。唯一要注意的是，如果项目用了多个 QueryClient，需要手动指定。

总的来说，这款插件是 TanStack Query 生态里最被低估的调试工具。如果你每天都在跟查询缓存打交道，装上它，能省下大量翻代码、打 console.log 的时间。