DevTools: Watching an App Talk

Vera opens Tandem's own web map — the one riders use to find bikes — and does something she has never done in twenty years of using browsers: she presses F12. A panel unfolds. She clicks the tab labelled Network, refreshes the page, and there they are: every request the map just made, listed like an itemized phone bill. The API was in front of her the whole time. Now she can watch it.

This panel is DevTools — the developer tools built into every modern browser, free, already installed, and despite the name, not just for developers. The Network tab is a read-only window onto your own browser's conversations, and learning to open it is the single biggest jump in seeing-power this book has to offer.

Opening the Panel

Three ways in: press F12 (on a Mac, Cmd + Option + I), or right-click the page and choose Inspect, or hunt through the browser menu for "developer tools." (Safari keeps its tools hidden until you tick Settings → Advanced → "Show features for web developers" once.) Click the Network tab in the panel that appears. One important habit: the tab records from the moment it is open, so refresh the page after opening it — that way you capture the conversation from the start. Each row that appears is one request: its address, its verdict, its size, its timing.

Finding the Interesting Rows

A busy page makes dozens of requests, most of them fetching images, fonts, and styling — legitimate traffic, but not what you came for. The Network tab has filters for exactly this: click Fetch/XHR — Chrome's label for the calls page code makes to fetch data; Firefox labels the same filter XHR — and the noise drops away. What remains is the API traffic. There, in Vera's filtered list: GET /v1/stations, verdict 200, right where Chapter 2 said it would be.

Reading One Conversation End to End

Click any row and the panel opens the whole exchange: the request headers your browser sent, the response headers the server answered with, and the response body — the JSON itself, prettified. Everything from Chapter 2, live, on a real conversation your own browser just had. Notice things you now recognize on sight: the Content-Type, the status code, the request's method. Nothing in this panel is new; the panel is where what you learned becomes visible.

A Professional Habit, Acquired

This is how developers, testers, and support people answer the question "what is this app actually doing?" — not by guessing, but by watching. It is a habit worth stealing early, and it is honest work: the Network tab shows your side of the conversation — the traffic your machine sends and receives. Tandem's servers, their databases, their internals: still behind the counter, where they belong. One more thing worth saying plainly: among what you can see is everything your browser sends on your behalf — which will matter in Chapter 5, when what it sends includes a key. The testers' version of this habit, systematized, lives in its own course: QA & Software Testing for Beginners, Chapter 8.