DevTools — Debugging Beyond console.log

// Conditional breakpoint — right-click a line number
//   condition: problem.slug === 'two-sum'
// Stops on the one iteration you care about out of 500.

// Logpoint — logs without pausing and without editing the file
//   Right-click -> Add logpoint -> problem.slug, state.status

// Break on a DOM change: Elements -> right-click -> Break on ->
//   attribute modifications / subtree modifications
// This is how you find what code is adding that class.

// Break on any exception: Sources -> pause icon -> caught + uncaught
// Then the stack at the moment of failure, not after it.

// In code
debugger        // pauses when DevTools is open, ignored otherwise

// Useful console methods people forget
console.table(problems)          // arrays of objects as a grid
console.time('render'); console.timeEnd('render')
console.trace()                  // how did we get here
console.assert(items.length > 0, 'empty')

// Check, in order:
//   1. Did the request happen at all?     (no row = a client-side bug)
//   2. Status code                        (401? 404? CORS preflight?)
//   3. Request payload                    (did you send what you think?)
//   4. Response body                      (raw, before your parsing)
//   5. Timing tab                         (waiting = server; download = size)

// Filters: Fetch/XHR, and a search across response bodies
// 'Preserve log' survives navigations — essential for auth redirects
// 'Disable cache' while DevTools is open
// Throttling to Slow 4G, which is what many of your users actually have

// Copy as fetch / Copy as cURL — reproduce a request exactly,
// which is how you hand a backend engineer something reproducible.

// A CORS failure shows as a blocked request with no response body,
// and the real explanation is always in the Console message.

// Performance panel: record, interact, stop.
//   - Long yellow blocks in Main = your JavaScript blocking the thread
//   - Red triangles = long tasks (>50ms), what users feel as jank
//   - The flame chart names the exact function

// React DevTools Profiler answers a different question:
//   which component re-rendered, and why (enable "record why each
//   component rendered")

// Memory: a leak shows as heap growth that never comes back down.
//   1. Snapshot, 2. do the leaky thing ten times, 3. snapshot again,
//   4. compare and look for detached DOM nodes.
// Detached nodes almost always mean a listener or interval that
// was never cleaned up.

// Lighthouse for the user-facing summary — LCP, INP, CLS,
// with the specific elements responsible.