GraphQL DevToolsGraphQL DevTools
Every GraphQL request on the page, readable at a glance. Inspect, replay and mock them, right inside Firefox.
Every request, readable
- Request list with operation name, query / mutation / subscription, timing and highlighted errors. Search and filters.
- Formatted query, variables and headers, with a browsable response tree.
- Handles batched requests, persisted queries (APQ) and subscriptions.
- Copy as cURL or as
fetch(), HAR export and import.
GraphQL errors, even on HTTP 200
GraphQL servers often answer 200 OK with an errors array. GraphQL DevTools shows those errors clearly, so a failing operation does not hide behind a green status code.
Playground and schema explorer
- Replay or edit any request, with autocomplete and deprecation warnings from the schema.
- Send it from the page (same origin, with its cookies, shown in the list) or from the add-on (any endpoint, no CORS limits).
- Schema explorer with types, fields, arguments and deprecations.
- Saved queries and a history of what you ran.
Insights
The slowest, most frequent and most failing operations of the page, at a glance.
Mock responses
Replace the response of an operation with your own JSON, status and delay, to test errors, empty states and slow networks without touching the server. Create a mock from a real response with one click.
Firefox for Android
Firefox for Android has no DevTools: GraphQL DevTools opens from the extension button, with a phone-friendly interface. Open it from ⋮ → Extensions → GraphQL DevTools. On desktop it is a panel in the browser's DevTools, and it also opens from the toolbar button.
Light and dark theme, English and Italian.
Permissions
| Permission | Why |
|---|---|
| Access your data for all websites | See the GraphQL requests of the pages you inspect, whatever their address. |
| webRequest, webRequestBlocking, webRequestFilterResponse | Read the GraphQL requests and responses of the page, and replace a response when you turn on a mock. |
| scripting | Send a playground request from the page itself, when you choose that option. |
| storage | Your settings, mocks, saved queries and the schemas of the endpoints you used. |
No data leaves your browser: see Privacy.
Source code
Plain, unminified source with no build step. Get it with git clone https://git.code.sf.net/p/graphql-devtools/code graphql-devtools, or download it from Files. To try it, load manifest.json from about:debugging → This Firefox → Load Temporary Add-on.