GraphQL Network Monitor

DevTools panel that monitors GraphQL operations and fetch/XHR requests with formatted queries, variables and responses.

GraphQL Network Monitor adds a "GraphQL Monitor" panel to Chrome DevTools that makes API traffic easy to read. GraphQL operations • Every query, mutation and subscription listed by operation name with a Q / M / S badge • Queries pretty-printed and syntax-highlighted, variables and extensions as formatted JSON • Batched requests split into one row per operation, GET and persisted queries supported • GraphQL "errors" highlighted in the list and shown on top of the response Fetch / XHR requests • Plain REST and JSON calls listed next to GraphQL, clearly marked with their HTTP method • Query parameters, request body and response at a glance For every request • Collapsible JSON tree for responses, plus the raw response • Request and response headers • Status, size and timing, in-flight requests shown as "(pending)" • Copy Query, Copy Variables, Copy Body and Copy as cURL • Filter by name or URL, by GraphQL / Fetch, by operation type or errors • Preserve log across navigations, keyboard navigation, light and dark theme Works even when DevTools does not report a response: responses are captured from the page while the panel is open. Privacy: everything stays in your browser. No servers, no analytics, no data collection. How to use: open DevTools (F12) → "GraphQL Monitor" tab, then use the page or reload it.