React Router Inspector

Inspect React Router loader/action data flow — payloads and response bodies, per route, decoded.

Stop guessing what your React Router app is doing. React Router v7 (framework mode) moves your data in ways the browser's Network tab can't show you: loader/action payloads are encoded (turbo-stream, not JSON), and the API calls that actually fetch your data run on the SERVER during SSR — invisible to any normal browser tool. Debugging means squinting at the terminal and decoding wire formats by hand. React Router Inspector puts all of it in one DevTools panel, decoded and organized the way you already read the Network tab. WHAT YOU GET • Loader & action data, decoded — the real values (Dates, Maps, BigInts and all), per route, live from the running router. No more reading turbo-stream by hand. • A loader-data diff — one toggle highlights exactly what changed in a route's data since the previous navigation (added / changed / removed keys). • A Routes tab — the full matched-route tree for a navigation, each route's params and its own loader-data slice. • Every call as a row — client .data requests, GraphQL operations, REST calls, and (uniquely) the SERVER-SIDE SSR fetches your loaders make — each with URL, query params, request + response headers, status, timing, size, and the decoded response body. Sort them at a glance with status/duration/size columns, color- coded call types, and an Errors filter. • Copy anything — hover any value to copy it, or copy a whole request as JSON, a URL, or a ready-to-run cURL command. • Find in pane (Ctrl/Cmd+F) — search the active data tree; matches expand and highlight as you step through them. • A console that finally makes sense — browser logs AND server/SSR logs together in a dockable, drag-resizable split pane you can keep open beside your events, grouped so a logged object is one collapsible entry (not 15 fragmented lines), with source (browser/server) and level filter chips. • Share a repro — export a captured session to JSON (auth/cookie headers redacted) and import it later, or on another machine. • Built for real work — a filter mini-syntax (status:5xx, method:POST, kind:graphql, -exclude), full keyboard navigation, a per-request summary header, a truncation marker that shows exactly where a capped body was cut off, error highlighting, group-by-navigation, a Preserve toggle across navigations, and preferences that persist across reloads. WHY IT'S DIFFERENT Other React Router devtools inject an overlay into your app and reconstruct a fake "network" view. This is a real Chrome DevTools panel that reads the actual browser records and the actual router state — and a tiny dev-only server bridge surfaces the SSR side that the browser physically cannot see. One install works across all your apps. Works on localhost out of the box; enable any deployed origin on demand. Nothing ships in production. Pairs with the companion dev-only Vite plugin (vite-plugin-rr-inspector) to stream server logs and SSR API calls into the panel. Does not collect, store, or transmit any data. Everything stays on your machine.