TanStack Query DevTools EN
DeeCode · Firefox
Real-time TanStack Query devtools in your browser. Inspect queries, mutations, and cache — with zero bundle impact.
<all_urls>），意味着它可以读取你在任意站点的页面内容，包括已登录的页面。这是许多扩展正常工作的必要条件，但也值得你确认来源可信。
截图
简介
Debug TanStack Query without shipping devtools to production.
See every query and mutation the moment it changes — cache state, status
transitions, full data payloads — from your browser toolbar or right inside
DevTools. No package to install, no bundle to grow, nothing to strip before
release.
WHAT YOU GET
- Live inspection — queries and mutations update in real time as your app runs
- Deep dive — status, data, and metadata for any single query or mutation
- Interactive data tree — expand, collapse, and explore deeply nested payloads
- Inline editing — change cached data on the spot and watch your UI react
- One-click cache actions — invalidate, refetch, reset, or remove queries; clear the mutation cache
- Status at a glance — fresh, stale, fetching, paused, inactive, error
- Search & sort — find any query by key; sort by key, status, or last updated
- Two ways to work — toolbar popup for a quick peek, DevTools panel for a real session
- Stays connected — survives page navigation within the tab
SETUP IS ONE LINE
window.__TANSTACK_QUERY_CLIENT__ = queryClient;
Reload your app. The toolbar icon lights up the moment a QueryClient is
detected. Click it for the popup, or open DevTools → TanStack Query for the
full panel.
WHY NOT THE BUILT-IN DEVTOOLS?
- Zero bundle impact — nothing ships to production, ever
- Framework-agnostic — React, Vue, Solid, Svelte, Angular: if it runs TanStack Query, it works
- Sits alongside your other DevTools panels instead of floating over your app
- No conditional imports, no tree-shaking tricks, no cleanup before release
Free and open source (MIT):
github.com/DeeCode-inc/tanstack-query-chrome-devtools
TanStack Query DevTools 是做什么的
TanStack Query DevTools 是一款面向 Firefox 的开发者工具类扩展，主要用来调试页面、查看样式与请求、测试接口、辅助前端开发。官方对它的介绍是：Real-time TanStack Query devtools in your browser. Inspect queries, mutations, and cache — with zero bundle impact.在Firefox 附加组件商店（AMO）上，它当前版本 1.1.1，评分 5（2 人评价），约 839 名用户。
适合什么人用
从功能定位看，TanStack Query DevTools 更适合前端工程师、测试与需要经常查看页面结构的用户。如果你平时只是偶尔遇到相关需求，用浏览器自带功能也能凑合；但如果这件事每天都发生，装一个专门处理它的扩展通常比手动操作省事得多。需要注意的是它作用于所有网站，装上后建议先观察一两天，确认不影响常用站点的正常使用。
怎么安装 TanStack Query DevTools
- 打开Firefox 附加组件商店（AMO）上的官方页面；
- 点「添加到浏览器」并确认权限提示；
- 装好后在扩展列表里固定图标，方便随时开关。
本站只做索引与介绍，安装包来自官方商店。如果商店页面提示当前地区不可用，说明该扩展未在你所在区域上架。
常见问题
TanStack Query DevTools 是免费的吗？
TanStack Query DevTools 在Firefox 附加组件商店（AMO）免费提供下载。它是浏览器扩展，装上就能直接用，不需要注册账号。
TanStack Query DevTools 安全吗？
它只申请了 0 项权限，范围比较克制，没有申请「读取所有网站数据」这种大权限。
TanStack Query DevTools 支持哪些浏览器？
当前收录的版本来自Firefox 附加组件商店（AMO），适用于 Firefox。同一个扩展在其他商店可能有对应版本，但功能与版本号不一定相同。
怎么卸载 TanStack Query DevTools？
在扩展管理页找到 TanStack Query DevTools，点移除即可。它在本地保存的设置会一起清掉，不会残留数据。
权限清单 来自 manifest.json 原文
站点访问 1
<all_urls>
接口权限 1
devtools