Полезные расширения для браузера
| Google Chrome | Mozilla FireFox |
|---|
Расширение для хрома, которое добавляет новый раздел в инспекторе.
Чтобы смотреть в нормальном виде, какие запросы улетают на бек и какие ответы прилетают обратно.
Инспектор с запросами
Самое интересное тут. Запросы и переменные можно тупо копировать и тащить в песочницу. И там уже играться, как душе угодно
Сам ответ
GraphQL Network provides a "network"-style tab for GraphQL requests to allow developers to debug more easily. The Chrome DevTools Network tab is fantastic for debugging RESTful api calls but it falls down a bit when it comes to GraphQL requests. This is because they are usually heading to the same endpoint "/graphql" which makes finding the right request difficult. Additionally they only display a string of text to represent your request body which makes it difficult to debug.
GraphQL Network displays separate entries for each request you send, displaying the query name so that you can easily find the request you want to debug. Beyond that GraphQL Network displays a well-formatted version of your request, a computed version which parses fragments and an easy to navigate response tab.