A new panel, built for GraphQL
A new tab in Chrome DevTools that shows the information you need. Using the interface you already know.
All your requests go to the same endpoint
All you could see was a list of POST /graphql with status 200. GraphQL Network shows you what you actually care about.
The error in the third request only shows up if you open its response.
Operation name, type and errors at a glance.
Query, variables and files in a single view
The Payload tab separates the operation from its variables and attached files, with GraphQL highlighting.
1 mutation UploadFavicon($file: File!) {
2 uploadFavicon(file: $file) {
3 name
4 size
5 __typename
6 }
7 }file: nullAnalyze every millisecond
The breakdown separates each phase of the request. If waiting dominates, the problem is in the resolver.
Subscriptions over WebSocket and SSE
Every message sent and received appears in order, with its time and size. The connection stays open for as long as the subscription is active.
No new tools to learn
The interface mirrors Chrome DevTools: filters, waterfall, detail panel and tabs in the same place. Open DevTools and start debugging.
Available on the Chrome Web Store
Cut the friction of working with GraphQL and start using tools that make your job easier.
Go to Chrome Web Store