GraphQL developer tools

A GraphQL panel in DevTools: every operation the page sends, with its variables, response, errors and headers

GraphQL developer tools adds a GraphQL tab to Chrome DevTools — the Network panel narrowed down to GraphQL, with the parts you actually look at. One row per operation: the operation name (or the first field of an anonymous query), the type (query / mutation / subscription), the HTTP status with the number of GraphQL errors, size, time and URL. Rows that failed — an HTTP error or an "errors" array in the response — are red. Select a row to see: • Query — the document with syntax colours, and the variables and extensions right under it • Response — pretty-printed JSON, with the error messages on top • Headers — URL, method, status, timing, size, request and response headers, "Copy as cURL" Every block has a Copy button. Queries and JSON fold: a triangle on every multi-line bracket, a collapsed one shows how many keys or items it hides, − / + collapse or expand the whole view. Filter by operation name, URL or a value in the variables; Clear; Preserve log across navigations. Arrow keys move the selection, Cmd/Ctrl+F focuses the filter. Requests recorded since DevTools was opened appear as soon as the panel is shown. Light and dark, following the DevTools theme. Recognised request shapes: a JSON body with "query" (whatever the Content-Type), batches (a JSON array — one row per operation), GET with the query in the URL, application/graphql, form-encoded and multipart uploads (the "operations" field), and persisted queries — Apollo's extensions.persistedQuery.sha256Hash, Relay document ids, Instagram / Facebook doc_id and query_hash — listed by their operation name. Privacy: the panel reads requests through the DevTools network API, only while DevTools is open, and shows them in the DevTools window. It makes no network requests of its own, collects nothing — no analytics, no telemetry, no accounts — and asks for no permissions. Privacy policy: https://github.com/s12v/graphql-devtools/blob/master/PRIVACY.md Open source (MIT): https://github.com/s12v/graphql-devtools — no dependencies, no build step, 26 KB. A Firefox build is on the releases page. Version 1.1: folding in the query, variables and response views; Firefox build. Version 1.0: a rewrite for Manifest V3. Batches, GET, multipart and persisted queries; operation names and error counts in the table; dark theme; filter, Clear and Preserve log; Copy buttons; Copy as cURL.