解码 React Router 和 Remix 数据流的 DevTools 面板
React Router Inspector，由独立开发者开发，是一个用于调试 React Router v6/v7 和 Remix 应用程序的 Chrome DevTools 扩展。它将加载器和操作有效负载解码为可读值，并显示网络选项卡遗漏的服务器端获取。该扩展添加了一个专用的 DevTools 面板，具有解码的请求列表、组合的控制台日志和可调整大小的窗格。它面向需要路由级可见性和更清晰的服务器-客户端数据流的网页开发者。
React Router Inspector 用于什么？
该扩展是一个仅用于开发的 DevTools 面板，旨在实时显示路由加载器和操作的行为。它附加到 Chrome DevTools，并列出每个数据请求的头部、时序和解码的主体，为开发者提供路由范围的可见性，而不是原始网络负载。这适合于在 React Router v6、v7 或 Remix 项目中工作的工程师，他们需要检查解码的值，例如日期、地图和大整数。
它如何暴露服务器端渲染活动？
该工具显示标准浏览器工具无法揭示的 SSR 获取，展示服务器端获取与客户端请求并列。它可以与一个配套的 Vite 插件集成，将服务器日志流入面板，以便开发者在单一统一视图中查看浏览器和服务器/SSR 日志。该面板还提供源过滤和保留切换，以在导航之间保留数据以进行逐步调试。
它如何处理复杂数据类型和开发者人机工程学？
检查器将 turbo-stream 格式解码为真实值，保留复杂类型，例如日期、地图和大整数，而不是留下不透明的编码块。用户界面针对开发者，具有可调整大小的窗格和错误高亮，并以网络样式布局列出 GraphQL 和 REST 操作。为了完全整合服务器日志，该扩展在基于 Vite 的项目中需要 vite-plugin-rr-inspector 配套。
一个专注于路由级调试的开发工具，具有明确的权衡
这个扩展是一个针对开发者的选项，他们需要解码的、路由范围内的加载器和动作的可见性，以及在开发过程中需要SSR获取可见性的开发者。它依赖于Chrome DevTools，并且对于服务器日志，需要一个Vite插件，因此不适合调试生产构建或没有Vite开发设置的项目。当您需要直接、可读的路由驱动数据流的洞察时，请使用它。
