Testing the UI: Browsers and DevTools

The browser you've used your whole life has a professional mode. Press F12 — or right-click anywhere and choose Inspect — and DevTools opens: a panel of instruments built into every browser, free, waiting. It turns "the page looks broken" into "the page is making a failing request," and it is the first tool that makes a manual tester feel like an engineer — because with it, you stop witnessing the relay from last topic and start watching it.

The mechanic's stethoscope is the right image. The car owner hears "a weird noise"; the mechanic, with an instrument pressed to the engine, hears which part makes it. Same car, same noise — the instrument is the difference. This page hands you the stethoscope.

Three Panels, Three Questions

DevTools has a dozen tabs; a tester lives in three. The Console shows the page's own error messages — when the page's code hits a problem, it often logs a complaint here, invisible to users, gold for bug reports (copy the error text in; developers read it like a map reference). The Network panel shows every request the page makes — the entire relay from last topic, made visible: each request's URL, what it carried, its status code, its response, its timing. This panel alone upgrades your whole Chapter 6 practice. And the device toolbar previews the page at phone and tablet sizes — a quick responsive check without leaving your desk (an honest preview, not a substitute for real devices; Chapter 10 owns that distinction).

What UI Testing Actually Checks

With the instruments named, the discipline they serve: UI testing is four questions, asked screen by screen. Behavior — do the controls do their jobs? (Chapter 4's techniques, applied to real fields.) State handling — the question beginners skip: what does the screen show while loading? When the result set is empty? When the server errors? Every screen has a loading, empty, and error state, and each is a place designers forgot and developers improvised. Input handling — your partitions and boundaries, now with the Console open, because a field that crashes the page's code logs its confession there. And layout across sizes — the device toolbar's beat.

Cross-Browser, Honestly

Browsers render one page slightly differently, and testers are told to fear this. The 2026 honest picture: the fear is mostly folklore. Browser engines have converged enormously; the differences that remain cluster in newer features and in Safari-on-mobile quirks. The professional practice isn't "test everything in every browser" — it's the pairwise table from Chapter 4, which already carries browsers as a factor, plus a habit of giving new or visually complex features one pass in the second engine. Risk-based, like everything else. When a posting says "cross-browser testing," this — not heroic matrix-grinding — is what competent teams mean.

FW-380: the Evidence Upgrade

Back to the mystery this chapter opened. Search for Saltwater Lodge shows no results; the page renders fine; other searches work. Now, the Network panel: you run the search with DevTools open and watch the request go out. There it is — the request's payload carries yesterday's date as check-in: a pre-filled value that doesn't refresh, so the server correctly answers "no availability starting yesterday." The server was never wrong; the question was. Frontend bug, compose leg. FW-380 gets filed with the Network panel screenshot showing the stale date in the request, plus the Console warning Lucy's code happened to log. Omar reads it and fixes it without a single follow-up question — the report contained the show. That's the Chapter 6 evidence field, upgraded from "screenshot of the symptom" to "screenshot of the cause."

Look, Don't Fear

A permission slip, because beginners genuinely hesitate: the panels you've met are read-only instruments — opening DevTools, reading the Console, watching the Network panel changes nothing about the product and breaks nothing for anyone. You are looking at what the page already does, with better eyes. (DevTools can also edit the page locally — those changes affect only your own browser view and vanish on reload; a curiosity for now, a prototyping tool later.) The habit to build this week: test with DevTools open. Every session, Network tab visible. Within a month, glancing at requests will be as automatic as reading error messages — and your bug reports will have quietly moved up a weight class.