TanStack Query DevTools在浏览器中使用的扩展工具，这款工具支持提供了对应用程序的数据获取、缓存和状态管理的深入洞察，使调试和优化变得毫不费力等，欢迎下载使用。
介绍
TanStack Query DevTools 是开发人员在 Web 应用程序中使用 TanStack Query 的必备调试伴侣。这个强大的 Chrome DevTools 扩展提供了对应用程序的数据获取、缓存和状态管理的深入洞察，使调试和优化变得毫不费力。无论您是使用 React、Vue、Svelte、Angular 还是普通 JavaScript 进行构建，此扩展都可以与使用 TanStack Query Core 的任何框架无缝协作。
该扩展程序作为专用面板直接集成到 Chrome DevTools 中，自动检测 TanStack Query 使用情况并以最少的设置提供实时监控。您将在专业的两列布局中看到所有查询和突变，并具有即时状态更新，使您可以随时轻松了解应用程序中发生的情况。
功能
• 实时查询监控，实时状态指示器显示加载、成功、错误和过时状态 • 交互式缓存检查，具有详细的 JSON 数据探索和语法突出显示 • 完整的突变跟踪，可查看会话期间执行的所有操作的历史视图 • 一键式调试操作，包括查询重新获取、缓存失效和手动删除 • 加载状态模拟和错误注入，用于全面的测试场景 • 专业的深色和浅色主题支持，具有自动系统检测功能 • 跨所有查询和突变的快速搜索和过滤功能 • 关闭 DevTools 时对应用程序的性能零影响
非常适合前端开发人员、全栈工程师、QA 团队以及使用数据驱动应用程序的任何人。该扩展消除了耗时的控制台调试会话，并帮助您立即识别性能瓶颈。您将一目了然地了解复杂的查询依赖关系和缓存行为，从而将调试时间从几小时缩短到几分钟。
设置很简单：安装扩展，然后通过将“window.__TANSTACK_QUERY_CLIENT__”设置为应用程序中的 TanStack 查询客户端实例来公开您的查询客户端。配置完成后，打开 Chrome DevTools，将会出现一个新的“TanStack Query”选项卡，让您可以立即访问强大的调试功能。
该扩展程序完全在您的浏览器本地运行，零数据收集，确保您的隐私和安全。所有调试都在您的计算机上进行，无需任何外部网络请求，因此可以在任何开发环境中安全使用。
无论您是要解决生产问题、优化查询性能还是培训新团队成员，TanStack Query DevTools 都能提供您所需的可见性和控制，以更快地构建更好的应用程序。
插件安装说明
1、在打开的谷歌浏览器的扩展管理器
就是点击最左侧的三个点，在弹出的菜单中选择【更多工具】——【扩展程序】
或者你可以在地址栏中直接输入chrome://extensions/
2、进入扩展程序页面后将开发者模式打勾
3、最后将解压出来的crx文件拖入到浏览器中即可安装添加
4、如果出现无法添加到个人目录中的情况，可以将crx文件右键，然后选择【管理员取得所有权】，再尝试重新安装
5、安装好后即可使用
扫码关注公众号，发【识别码】获取
