GraphQL Network
Installieren

Ein neues Panel, gemacht für GraphQL

Ein neuer Tab in den Chrome DevTools, der die Informationen zeigt, die du brauchst – in der Oberfläche, die du schon kennst.

Zu Chrome hinzufügenFunktionen ansehen
Warum

Alle deine Anfragen gehen an denselben Endpoint

Bisher sahst du nur eine Liste von POST /graphql mit Status 200. GraphQL Network zeigt dir, was dich wirklich interessiert.

Chrome Netzwerk
NameStatusTyp
graphql200fetch
graphql200fetch
graphql200fetch
graphql200fetch
graphql200fetch

Der Fehler in der dritten Anfrage ist nur sichtbar, wenn du ihre Antwort öffnest.

GraphQL Network
NameStatusTyp
Godsokquery
CreateGodokmutation
GetUser1 Fehlerquery
GetEventsokquery
GodActionoksubscription

Operationsname, Typ und Fehler auf einen Blick.

Payload

Query, Variablen und Dateien in einer Ansicht

Der Payload-Tab trennt die Operation von ihren Variablen und angehängten Dateien – mit GraphQL-Syntaxhervorhebung.

Query
1  mutation UploadFavicon($file: File!) {
2    uploadFavicon(file: $file) {
3      name
4      size
5      __typename
6    }
7  }
Variablen Quelltext anzeigen
file: null
Dateien
1favicon.ico· image/x-icon
Timing

Analysiere jede Millisekunde

Die Aufschlüsselung trennt jede Phase der Anfrage. Dominiert die Wartezeit, liegt das Problem im Resolver.

CreateGodmutation · 184,6 ms
In Warteschlange1,2 ms
Erste Verbindung6,8 ms
SSL12,4 ms
Anfrage gesendet0,6 ms
Warten auf Server148,2 ms
Inhalts-Download15,4 ms
Echtzeit

Subscriptions über WebSocket und SSE

Jede gesendete und empfangene Nachricht erscheint der Reihe nach, mit Uhrzeit und Größe. Die Verbindung bleibt offen, solange die Subscription aktiv ist.

GodAction · subscription · wsOffen
Gesendet{"type":"connection_init","payload":{}}12:04:01
Empfangen{"type":"connection_ack"}12:04:01
Gesendet{"id":"1","type":"subscribe","payload":{"query":"subscription GodAction…"}}12:04:01
Empfangen{"id":"1","type":"next","payload":{"data":{"godAction":{"god":"Hermes"}}}}12:04:09
Empfangen{"id":"1","type":"next","payload":{"data":{"godAction":{"god":"Athena"}}}}12:04:15
Empfangen{"id":"1","type":"next","payload":{"data":{"godAction":{"god":"Zeus"}}}}12:04:22
Oberfläche

Keine neuen Tools zu lernen

Die Oberfläche entspricht Chrome DevTools: Filter, Wasserfall, Detailbereich und Tabs am gewohnten Platz. DevTools öffnen und losdebuggen.

Im Chrome Web Store erhältlich

Weniger Reibung mit GraphQL – nutze Tools, die dir die Arbeit erleichtern.

Zum Chrome Web Store