DevTools Field Guide
High-level browser debugging tips with just enough depth to be useful fast.
Quick Navigation
Network Tab: Source of Truth
First Place to Check
- Preserve log: Keeps requests after refresh, redirects, or auth flows.
- Disable cache: Prevents stale assets while debugging.
- Filter by type: Focus on Fetch/XHR for APIs, Doc for page loads, WS for real-time.
- Compare payloads: Request payload (client) vs response payload (server).
- Headers matter: Check Cache-Control, Authorization, and content-type.
- Timing: Use the waterfall to spot slow DNS, TLS, or server delays.
Status Codes Tell Stories
What the Server is Really Saying
- 200: Still check the body. Many apps return errors inside a 200.
- 401/403: Auth or permissions. Look for expired tokens or role mismatch.
- 429: Rate limiting. Retry after delay or inspect headers.
- 5xx: Server error. Capture request ID and move on.
- 3xx: Redirects can hide auth flows or mis-routed requests.
Console: Fast Signal
Errors You Should Not Ignore
- Uncaught errors: The app crashed a code path.
- Undefined or null: Usually missing data or bad assumptions.
- Warnings: Often become real bugs later.
- console.table(): Best way to read arrays or objects fast.
- Stack traces: Click the file/line to jump to the source.
- Source maps: Make sure they load so errors point to real code.
Application Tab: State & Storage
What the Browser Is Holding
- Local/Session Storage: Feature flags, app state, cached data.
- Cookies: Domain scope, expiration, secure/httpOnly flags.
- Clear storage: Reproduce a clean session and rule out stale state.
- Secure/HttpOnly: Secure requires HTTPS, HttpOnly hides from JS.
- Path & Domain: Wrong scope can break login or sessions.
Elements Tab: UI Debugging
Common UI Fixes
- Toggle display/visibility: Find hidden components fast.
- Check z-index: Most modal and dropdown bugs live here.
- Disable overflow: Fix clipped or unscrollable content.
- Force :hover/:focus: Inspect menus and hidden states.
- Box model: Margin/padding often explains “why is this off?”.
- Computed styles: See the final applied CSS when inheritance is confusing.
Request Methods: Intent Check
Match Method to Action
- GET: Fetch only. Should not modify data.
- POST: Create or submit new data.
- PUT/PATCH: Update existing data.
- DELETE: Remove data.
- Mismatch: If the method doesn’t match the action, expect bugs.
CORS & Preflight (OPTIONS)
When Requests Never Fire
- OPTIONS fails: The real request is blocked.
- Access-Control headers: Missing or wrong values cause silent failure.
- Browser differences: CORS can behave differently across browsers.
- Credentials: Cross-site cookies require explicit allow-credentials.
WebSockets & SSE
Real-Time Troubleshooting
- WS status 101: Connection accepted.
- Ping/pong missing: Indicates timeout or disconnects.
- SSE: Should stay open and stream data without closing.
- Reconnect loops: Often show auth/token or proxy problems.
Performance & Throttling
Simulate Real-World Conditions
- Throttle CPU/network: Reproduce slow-device or low-bandwidth issues.
- Record trace: Find long tasks and layout shifts.
- Measure regressions: Compare before/after changes.
- Memory: Watch for growing heap size during long sessions.
Handy Shortcuts
Speed Boosters
- Open DevTools: F12 / Cmd+Opt+I
- Inspect Element: Cmd+Shift+C
- Search Files: Cmd+P
- Command Menu: Cmd+Shift+P