JSON RPC Chrome Viewer

JSON-RPC Chrome Viewer is a DevTools panel for inspecting, searching and mocking JSON-RPC traffic. Every call is listed by its method, with the request paired to its response - a faster alternative to reading raw POST /rpc bodies in the Network tab. Try the live demo: https://json-rpc-chrome-viewer.lomonos.com.ua Features: • Server-side requests - see the JSON-RPC calls your server makes while rendering a page. They never reach the browser, so DevTools cannot show them. Calls are grouped under the page load that made them. One line of setup in a Next.js app, any Node server supported, development-only: https://www.npmjs.com/package/@json-rpc-chrome-viewer/server-logger • HTTP and WebSocket, with JSON-RPC batches split into one row per call • Errors stand out: failed calls are marked red with their error code and message, and slow calls are highlighted in the Time column • Response interceptor - mock RPC responses: match methods exactly or by glob pattern, answer with a custom result or error, HTTP status and delay, without touching the network. Works only in the inspected tab and only while DevTools is open • Create a mock rule from any request in one click, pre-filled with its method and current response • Syntax-highlighted rule editor - a rule stays inactive until its JSON parses • Waterfall timing with a full phase breakdown on hover: queueing, stalled, DNS lookup, initial connection, SSL, request sent, waiting for server response, content download • See requests while they are still in flight, with a waterfall bar that grows until the response arrives • Search across method names, request params, response results and error codes/messages, with switchable scope, case sensitivity and highlighted matches • Six layouts: side-by-side panes, stacked, drawer, drill-down, inline accordion, or Auto, which picks one to fit the panel • Adapts to a narrow panel - docked to the side, the toolbar folds its least-used toggles away and the list keeps the method column. Your settings are untouched, so widening the panel restores everything • Sortable, resizable, reorderable and configurable columns; resizable panes; compact rows • Status pills, readable sizes (B / kB / MB) and a summary footer with request count, errors, slow calls, total size and time span • Method namespaces highlighted (user.getProfile, orders.list) for faster scanning • Edit and resend any request • Copy a method name in one click • Convert a response to TypeScript types • Captures requests made before the panel is opened • Resilient capture - if requests appear in Chrome's Network tab but not in the panel, switch it on to read requests directly from the page. This happens when another DevTools extension patches window.fetch, which stops Chrome reporting those requests to other panels • Preserve log and autoscroll to the latest request • Keyboard navigation through the request list • URL label for each method; CORS, WS, SERVER and MOCK badges • Expand/collapse JSON tree with configurable depth, selectable JSON viewer themes • Collapsed JSON nodes preview what they hold - { key: value, … } instead of an anonymous { … } • Dark and light themes Open source (MIT) - captured traffic stays in the panel and is never sent anywhere: https://github.com/lomonosv/json-rpc-chrome-viewer Website and live demo: https://json-rpc-chrome-viewer.lomonos.com.ua Feature requests, bug reports and pull requests are welcome.