Browsers and DevTools
"The Suggest button just spins forever." Asha used to paste that sentence into her assistant and wait. Now she opens the browser's developer tools first. In under a minute they tell her whether the problem is in the page, in the request, or on the server.
The rule
Console for errors, Network for requests — read both before asking for a fix.
Every major browser has built-in DevTools; right-click the page and choose Inspect to open them. Three panels cover most needs:
- Elements — the live HTML and CSS. Click any element to see which rules apply to it and why it looks the way it does.
- Console — error messages from the page's JavaScript, shown in red, often with a file name and line number.
- Network — every request the page makes, with its status code, its response and how long it took.
The status code tells you where to look:
| Code | What it means |
|---|---|
| 2xx, such as 200 | It worked |
| 4xx, such as 400, 401, 404, 429 | The server refused the request: bad input, not allowed, not found, or too many requests |
| 5xx, such as 500, 503 | The server failed while handling the request |
DevTools also has a device toolbar that previews the page at phone sizes, the quickest way to reproduce "it's broken on my phone".
The shortcut
Open, repeat, read. Open DevTools, repeat the action that failed, then read the Console for red errors and the Network row for the request's status and time.
Open and repeat
Asha opens DevTools, switches to the Network panel, and taps Suggest again.
The Console settles another common question in seconds. A red error and no request in the Network panel means the click never reached the server: the bug is in the page's own JavaScript.
Drills
Answer fast — trust the rule.
A request to /api/suggest returns status 500. Where is the problem?
Which DevTools panel shows how long the suggestion request took?
Tapping Suggest shows a red TypeError in the Console, and no request appears in Network. What does that tell you?
The request returns status 429. What does it most likely mean?
Remember
- Console for errors, Network for requests — read both before asking for a fix.
- Open, repeat, read: 2xx worked, 4xx refused, 5xx the server failed.
- Trap: pasting "it's broken" when the exact error text and status code would point straight at the fault.