ReferenceBeginner4-6 min reference
Browser DevTools for QA
You don't need to be a front-end dev to get huge value from DevTools. This is the tester's subset: confirming a request fired, reading a failing response, finding a stable selector, and reproducing a layout bug at a given viewport. Shortcuts are Chrome/Edge; Firefox is similar.
Open it
| Action | Shortcut |
|---|---|
| Open DevTools | F12 / Cmd+Opt+I (Mac) |
| Toggle device toolbar | Cmd/Ctrl+Shift+M |
| Command menu (run any panel action) | Cmd/Ctrl+Shift+P |
| Inspect an element | Cmd/Ctrl+Shift+C |
Panels for QA
| Panel | Use it to |
|---|---|
| Network | Confirm a call fired, read status/headers/payload, check timing, filter XHR/Fetch, copy as cURL, throttle the connection |
| Console | See JS errors and warnings, run quick document.querySelector checks |
| Elements | Find/verify selectors, inspect computed styles, toggle states (:hover, :focus) |
| Application | Inspect cookies, localStorage, sessionStorage, service workers; clear site data |
| Device toolbar | Reproduce layout bugs at a chosen viewport / device |
| Lighthouse | Quick perf / a11y / SEO snapshot |
Handy moves
- Right-click a request → Copy → as cURL to hand devs an exact repro or replay it in Postman.
- Network → Preserve log to keep requests across a redirect/login.
- Network → Disable cache (with DevTools open) to test a cold load.
- Export a HAR (Network → ⤓) to attach to a bug — see the HAR viewer utility below.
- Console → filter to Errors to catch silent JS failures during a manual pass.
Common mistakes
- Reporting "the button doesn't work" without checking the Console for the error.
- Missing a failed call because Preserve log was off and the page navigated.
- Trusting a screenshot of the wrong viewport — set the device toolbar first.
- Testing with cache on, so a stale bundle hides (or fakes) the bug.
// Related resources