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 / persisted), 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. Click a column to sort; the counter sums up the rows in view. Select a row to see: • Query — the document with syntax colours, pretty-printed when the client sent it minified ("as sent" shows the original), with the variables and extensions right under it. A persisted query whose document was seen in another request with the same hash (Apollo's APQ retry) shows that document. • Response — pretty-printed JSON, with the error messages on top • Headers — URL, method, status, timing phases, Server-Timing, size, request and response headers, "Copy as cURL" Resend sends the same request again from the page — with its cookies and headers — and the answer arrives as a new row; Edit & resend lets you change the document or the variables first (a mutation asks twice). 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, by operation type, or errors only; Group folds repeated operations into one row with a count, the errors, the total size and the average time — the quickest way to spot an N+1; 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, GitHub's and X's own formats — 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. The only request it ever causes is the one you ask for with Resend, made by the page itself. 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, 34 KB. A Firefox build is on the releases page. Version 1.3: Group repeated operations; Resend and Edit & resend. Version 1.2: pretty-printed queries; persisted queries learn their document from the APQ retry; sorting, type filter, errors filter, totals; timing phases and Server-Timing; GitHub and X request formats. 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.