なぜ
すべてのリクエストが同じエンドポイントに届く
これまで見えるのは、ステータス 200 の POST /graphql が並ぶだけの一覧でした。GraphQL Network なら、本当に知りたい情報がひと目でわかります。
Chrome のネットワーク
名前ステータスタイプ
graphql200fetch
graphql200fetch
graphql200fetch
graphql200fetch
graphql200fetch
3 番目のリクエストのエラーは、レスポンスを開かないと確認できません。
GraphQL Network
名前ステータスタイプ
Gods成功query
CreateGod成功mutation
GetUserエラー1件query
GetEvents成功query
GodAction成功subscription
オペレーション名、種類、エラーをひと目で。
ペイロード
クエリ、変数、ファイルを 1 つのビューに
ペイロードタブでは、オペレーションを変数や添付ファイルと分けて表示し、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
タイミング
1 ミリ秒ごとに分析
内訳でリクエストの各フェーズを分けて確認できます。待機時間が長ければ、原因はリゾルバーにあります。
CreateGodmutation · 184.6 ms
キューに登録中1.2 ms
最初の接続6.8 ms
SSL12.4 ms
リクエスト送信0.6 ms
サーバーの応答を待機中148.2 ms
コンテンツのダウンロード15.4 ms
リアルタイム
WebSocket と SSE 上のサブスクリプション
送受信したメッセージが、時刻とサイズとともに順番に表示されます。サブスクリプションが有効な間、接続は開いたままです。
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 を開けば、すぐにデバッグを始められます。
