RSC Viewer

DevTools panel for inspecting React Server Component (RSC) payloads

RSC Viewer is a Chrome DevTools extension for inspecting React Server Component (RSC) payloads — the streaming "text/x-component" responses that frameworks like Next.js use to render Server Components in the browser. It captures these payloads from the network and displays them in a structured, navigable view that Chrome's built‑in Network panel often cannot show, because their bodies are consumed by the page's stream reader before DevTools can read them. You will get one new tab in your Chrome DevTools: "RSC Viewer". The panel lists every RSC request the inspected page makes, including the initial HTML document (whose payload is embedded as script tags) and any follow‑up navigation or prefetch fetches. Each entry shows method, URL, status, size, and timing, and the list can be filtered, paused, and cleared. Selecting a request opens a detail view with Headers and Response tabs. The Response tab parses the React Flight wire format, color‑codes each row by its type, and draws arrows connecting references to the rows they point at. Embedded RSC streams are parsed recursively and can be drilled into through a breadcrumb. Streaming responses appear in real time, so you can read partial chunks before the request finishes. Built‑in find (Cmd‑F / Ctrl‑F) supports incremental search with match navigation across all rows. A Statistics panel breaks down payload bytes by row type as a pie chart and reports both the resource size and the transferred (compressed) size. An integrated Flight Protocol reference documents every row tag, reference prefix, and binary chunk type the parser recognizes, so you don't need to leave DevTools to remember what a "T" row or a "$L" reference encodes. This extension requires permission to access the inspected page in order to capture streaming RSC responses, but it does not transmit any data remotely. It is fully open source, and you can find its source code at https://github.com/unstubbable/rsc-viewer.