Новая панель, созданная для GraphQL

Новая вкладка в Chrome DevTools, которая показывает нужную вам информацию в знакомом интерфейсе.

Добавить в Chrome Смотреть возможности

Почему

Все ваши запросы идут на один и тот же endpoint

Раньше вы видели лишь список POST /graphql со статусом 200. GraphQL Network показывает то, что вам действительно важно.

Сеть Chrome

ИмяСтатусТип

graphql200fetch

Ошибка в третьем запросе видна, только если открыть его ответ.

GraphQL Network

ИмяСтатусТип

Godsокquery

CreateGodокmutation

GetUser1 ошибкаquery

GetEventsокquery

GodActionокsubscription

Имя операции, тип и ошибки — с первого взгляда.

Payload

Запрос, переменные и файлы в одном представлении

Вкладка Payload отделяет операцию от её переменных и прикреплённых файлов и подсвечивает синтаксис GraphQL.

Запрос

1  mutation UploadFavicon($file: File!) {
2    uploadFavicon(file: $file) {
3      name
4      size
5      __typename
6    }
7  }

Переменные Показать исходник

file: null

Файлы

1favicon.ico· image/x-icon

Время

Анализируйте каждую миллисекунду

Разбивка показывает каждый этап запроса. Если доминирует ожидание, проблема в резолвере.

CreateGodmutation · 184,6 ms

Постановка в очередь1,2 ms

Начальное соединение6,8 ms

SSL12,4 ms

Запрос отправлен0,6 ms

Ожидание ответа сервера148,2 ms

Загрузка контента15,4 ms

В реальном времени

Subscriptions через WebSocket и SSE

Каждое отправленное и полученное сообщение отображается по порядку — со временем и размером. Соединение остаётся открытым, пока subscription активна.

GodAction · subscription · wsОткрыта

{"type":"connection_init","payload":{}}12:04:0139 B

{"type":"connection_ack"}12:04:0125 B

{"id":"1","type":"subscribe","payload":{"query":"subscription GodAction…"}}12:04:01212 B

{"id":"1","type":"next","payload":{"data":{"godAction":{"god":"Hermes"}}}}12:04:09148 B

{"id":"1","type":"next","payload":{"data":{"godAction":{"god":"Athena"}}}}12:04:15148 B

{"id":"1","type":"next","payload":{"data":{"godAction":{"god":"Zeus"}}}}12:04:22146 B

Интерфейс

Не нужно осваивать новые инструменты

Интерфейс повторяет Chrome DevTools: фильтры, водопад, панель сведений и вкладки на привычных местах. Откройте DevTools и начинайте отладку.

Доступно в Chrome Web Store

Уберите лишние трудности при работе с GraphQL и начните пользоваться инструментами, которые упрощают вашу работу.

Перейти в Chrome Web Store