Browser dev tools in depth: status codes, cookies, CORS, timing and safe HAR evidence
For support specialists and senior support staff who already isolate web app problems from the browser and now need to read what the developer tools are telling them, and hand engineers evidence they can act on. It builds on 'Troubleshooting web applications from the browser' (w3cs-web-app-troubleshooting), which covers isolation tests, cache and cookie basics, Preserve log and the warnings never to talk users past. You'll interpret status codes and failed-request states, read Cache-Control and Set-Cookie attributes and the Application panel, diagnose CORS errors and route them to the right owner, use the timing breakdown and throttling, and export sanitised evidence with an escalation note. Examples use Chrome DevTools; Edge uses the same tools and Firefox has equivalents. Your organisation's policy decides where captured evidence may be stored and who may receive it. Ends with a supervisor-graded investigation of faults in a test web app.
- Level
- Intermediate
- Length
- About 100 minutes
- Contents
- 5 lessons · final exam
- Status
- Published · updated 10 Oct 2026
Skills you'll practise
- Interpret status codes and failed-request states in the Network panel to locate a web app fault
- Diagnose stale data and cookie problems from response headers and the Application panel
- Diagnose CORS errors from Console and Network evidence and route them to the API's owners
- Use the timing breakdown and network throttling to separate a slow server from a slow network or busy browser
- Collect and share browser evidence safely: a sanitised HAR, filtered requests and an escalation note
Course outline
- 1.Interpret status codes and failed-request states in the Network panelLesson · 15 min
- 2.Diagnose stale data and cookie problems from response headers and the Application panelLesson · 16 min
- 3.Diagnose CORS errors from Console and Network evidence and route them to the API's ownersLesson · 15 min
- 4.Use the timing breakdown and network throttling to separate a slow server from a slow networkLesson · 14 min
- 5.Collect and share browser evidence safelyLesson · 14 min
- 6.Browser dev tools in depth: status codes, cookies, CORS, timing and safe HAR evidence: knowledge checkKnowledge check · 14 questions
- 7.Browser dev tools in depth: status codes, cookies, CORS, timing and safe HAR evidence: practical exerciseKnowledge check · 1 question
- 8.Final exam10 questions · passing it completes the course, so people who already know the material can test out
Sources it draws on
The lessons and questions are written from these references, so learners can go back to the original.
- Chrome for Developers: Network features reference (filters, Status column values, headers, Cookies tab, timing breakdown phases, throttling, HAR export sanitised and with sensitive data, Copy options)
- Chrome for Developers: View, add, edit, and delete cookies (Application > Storage > Cookies fields, third-party cookie warnings)
- Chrome for Developers: Debug Progressive Web Apps (Service Workers tab: Update on reload, Bypass for network, Unregister; Clear storage)
- Chrome for Developers: Console features reference (log levels, Show CORS errors in console, Preserve log, filters)
- MDN Web Docs: HTTP response status codes
- MDN Web Docs: 429 Too Many Requests (rate limiting, Retry-After)
- MDN Web Docs: Cross-Origin Resource Sharing (CORS) guide (same-origin policy, preflight, credentialed requests)
- MDN Web Docs: CORS errors (identifying a CORS issue, server-side resolution, reason messages)
- MDN Web Docs: Set-Cookie header (Domain, Path, Expires/Max-Age, HttpOnly, Secure, SameSite)
- MDN Web Docs: Cache-Control header (max-age, no-cache, no-store, private)
See it with your own jobs and topics
Tell us about your team and we'll walk you through setup, from choosing jobs to your first skills check.