TanStack Query DevTools

用于调试 TanStack Query 应用程序的 DevTools 扩展。实时检查查询、突变和缓存状态。

TanStack Query DevTools — 用于实时调试 TanStack Query (React Query) 应用程序的浏览器扩展。

它的作用

检查应用程序中发生的每个查询和突变。查看缓存状态、状态转换和数据有效负载 - 所有这些都无需向您的捆绑包添加任何开发工具依赖项。

特征

• 实时查询和突变检查——实时观察查询和突变更新
• 详细视图 — 深入了解各个查询/突变以查看状态、数据和元数据
• 交互式数据树——将查询和变异数据作为可扩展、可折叠的树进行探索
• 内联数据编辑——直接从开发工具修改缓存的查询数据
• 缓存操作——使查询无效、重新获取、重置或删除；清除突变缓存
• 状态徽章 — 一目了然的指示器：新鲜、陈旧、正在获取、已暂停、非活动、错误
• 搜索和排序 — 按查询键过滤、按键、状态或上次更新时间排序
• 弹出窗口和 DevTools 面板 — 用作独立弹出窗口或浏览器 DevTools 内的面板

设置

在窗口上公开您的 QueryClient：

window.TANSTACK_QUERY_CLIENT = queryClient;

导航到您的应用程序。当检测到 QueryClient 时，扩展图标会变成彩色。

单击弹出窗口的图标，或打开 DevTools → TanStack Query 以获取完整面板。

为什么使用它而不是内置的 TanStack Query DevTools？

• 零捆绑影响——没有任何东西投入生产
• 只要您公开 QueryClient，就可以在任何 TanStack Query 应用程序（React、Vue、Solid、Angular、Svelte）上使用
• 完整的 DevTools 面板与其他浏览器开发人员工具集成
• 同一选项卡内的持久跨页面导航