Debug a broken web app with Chrome DevTools

Interview framing: Good debugging is systematic. Start by reproducing the issue, then narrow it with browser evidence.

Workflow:

1. Reproduce and scope:

• What exact user action breaks?
• Is it browser-specific, user-specific, data-specific, or environment-specific?

2. Console:

• Look for runtime errors, failed assertions, warnings, and stack traces.
• Preserve logs across navigation if the issue happens during page load.

3. Network:

• Check failed requests, status codes, payloads, response bodies, CORS errors, caching, and timing.
• Confirm whether the bug is frontend rendering or backend/API data.

4. Elements:

• Inspect DOM structure, computed CSS, layout, z-index, overflow, and event listeners.
• Use forced states like :hover/:focus for UI bugs.

5. Sources:

• Add breakpoints, conditional breakpoints, and inspect call stacks.
• Use source maps to debug TypeScript/React/Angular source.

6. Performance:

• Record slow interactions.
• Look for long tasks, layout thrashing, expensive scripting, and repeated renders.

7. Application:

• Inspect cookies, localStorage, sessionStorage, IndexedDB, service workers, and cache.

Strong closing: "I try to prove where the bug lives: browser state, network/API, rendering/CSS, framework state, or business logic. Then the fix is usually much smaller."