Capturing traffic

Operations appearing in Traffic as the page makes them, then opening one to see its Request, Response, Headers and Timing. Narrated, with sound. The dark and light versions follow the site's theme.

About the recordings

Chrome can’t be automated inside the real DevTools window, so the DevTools videos on this site show the Wireglass panel opened as a browser tab, fed with the same events DevTools would report. The panel itself is the real extension, and inside DevTools it looks and behaves the same.

Open it

Open DevTools on any page and choose the Wireglass tab, then Traffic. It lists the page’s GraphQL HTTP operations as they finish:

• POST and GET requests, batched requests (one row per operation, marked batch i/n), and persisted queries (persisted:<hash>).
• Each row shows its type, name, endpoint, status and duration.

A request whose document doesn’t parse still shows, marked unparsed. Requests made before DevTools was opened are included.

The detail pane

Select a row for Request (the query and its variables), Response, Headers and Timing. Queries, variables and JSON responses are highlighted code with fold arrows on every block, plus Expand all, Collapse all and Copy, which copies the full text even when folded. Responses use the response viewer.

Subscriptions over WebSocket

Operations the page runs over graphql-transport-ws (the graphql-ws library) or legacy subscriptions-transport-ws appear in the same list, tagged WS with a blue edge. The All / HTTP / WebSocket switch shows one kind at a time.

Each operation is one row with its state (live, done, stopped, error or closed) and the number of results. Its detail pane has Request, Messages (every message; pick one to see its payload), Connection (URL, protocol, the connection_init payload and any close code) and Timing.

A small script in each page wraps WebSocket to see the frames. Nothing is sent anywhere but this extension’s own panel, and only while the panel is open for that tab. Until then the page keeps the last 500 messages (plus a few connection starts) so subscriptions started before you opened DevTools still show their query.

Navigation and Preserve log

The list keeps the newest 1,000 operations and clears on navigation: a page load, or an in-app route change to a different path. A change of only the query string or hash keeps it. Tick Preserve log to keep everything across navigations. The setting is remembered; the captured traffic is not. It lives in memory only.

Open in client

Open in client opens the operation in a new client tab with the endpoint, query, variables and the app’s headers (such as authorization and x-*), but never cookies or browser headers. It sends nothing: press Run when ready. Persisted-only rows can’t be opened, because the page never sent their query text.

What’s recognised

JSON bodies (including variables or extensions sent as a JSON string), GET requests (including double-encoded parameters), application/graphql bodies, multipart uploads, and Relay-style doc_id / documentId requests (listed as persisted rows). application/x-www-form-urlencoded bodies aren’t captured yet.