Announcing GraphQL Network Inspector
GraphQL Network Inspector is a dedicated devtools extension which allows you to inspect and debug GraphQL queries and mutations from network traffic.
The extension has seen great adoption since its initial release and now I'm excited to announce it's new home as part of The Guild.
You can check out the open source extension and try it out today. GraphQL Network Inspector (opens in a new tab)
If you've ever worked with GraphQL on the client, you'll know that it can be a real pain to debug using the standard network tab. The standard devtools are designed for REST APIs and don't provide clear visibility into the individual GraphQL queries and mutations being sent.
With every request you'll see
POST /graphql. This makes it difficult to distinguish requests
without opening the request details and inspecting the body.
GraphQL Network Inspector solves this problem by providing a dedicated tab for GraphQL requests and displaying each query in a readable format.
The great thing about a dedicated inspector is we can provide much more specific functionality around GraphQL. Here are some of the features we've added to the extension:
The request overview tab provides a simple overview of all queries and mutations. Here you can see queries by name, distinguish between queries and mutations and even see total errors returned for each request.
Clicking into a request will show similar details to the standard inspector. But here we have a better breakdown for each element of the request including; headers, request query with variables and response.
The extension also provides convenient buttons to copy the request query and variables into GraphQL Playground, great if you want to re-run the query.
Under the request details tab, you'll see a button to copy the query and variables to the clipboard.
You can also click individual headers to copy them as well.
Streamlining the debugging process is a key goal of the extension. On top of the features above we've also introduces helpful extras such as full-text search and filtering.
Check out the extension today and don't forget to give GraphQL Network Inspector (opens in a new tab) a star ⭐️ on GitHub.
We'd love to hear your feedback and suggestions for the extension. How would you like to see it integrate further with The Guild ecosystem? Let us know.
Join our newsletter
Want to hear from us when there's something new? Sign up and stay up to date!Recent issues of our newsletter
State of GraphQL Gateways in 2023
A six-month journey of researching, benchmarking, exploring and comparing GraphQL gateways and the Federation spec in 2023.
Hive Summer Update 2023
Learn what is new on GraphQL Hive, we have shipped a lot of new exciting features and improvements.
The complete GraphQL Scalar Guide
Knowing how native and custom GraphQL Scalar works enables building flexible and extendable GraphQL schema.
Build a GraphQL server running on Cloudflare Workers.
This course aims to build a practical GraphQL server on Cloudflare Workers using GraphQL Yoga, Pothos, Kysely, etc.