Developer Experience6 min read

Debugging & Profiling

Systematically find and fix bugs and performance bottlenecks - using Chrome DevTools, Node.js profiler, memory leak detection, and structured debugging techniques.

DebuggingProfilingChrome DevToolsNode.js ProfilerPerformance

skill: Debugging & Profiling category: Developer Experience tags: [Debugging, Profiling, Chrome DevTools, Node.js Profiler, Performance] readingTime: 6

Debugging is a skill - not a gift. Systematic techniques (binary search, differential diagnosis, rubber duck debugging) find bugs faster than intuition-driven random changes. Never deploy a 'fix' you don't understand; you're just reshuffling the bug. Always understand why the bug occurred before declaring it fixed.

Workflow

Reproduce the bug reliablyA bug you can't reliably reproduce can't be systematically fixed. Every debugging session starts with making the bug deterministic.
Use Chrome DevTools for frontend debuggingChrome DevTools is a complete IDE for debugging and profiling - breakpoints, call stacks, memory snapshots, network inspection, and performance traces in one tool.
Profile Node.js applicationsNode.js performance bottlenecks can be CPU-bound (synchronous code) or I/O-bound (slow DB queries, external APIs). Profiling reveals which it is.
Find React performance issues with ProfilerReact's built-in Profiler identifies which components re-render unnecessarily and how long each render takes.
Apply systematic debugging techniquesRandom code changes to fix a bug often create new bugs. Systematic techniques find the root cause efficiently.

Output Format

Debugging toolkit: reproducible test case, DevTools breakpoints/profiles, Node.js flame charts, and systematic root cause analysis.

Debugging checklist:
1. Reproduce reliably (steps, env, frequency)
2. Form a hypothesis (specific, falsifiable)
3. Test hypothesis (add targeted log/breakpoint)
4. Fix root cause (not symptom)
5. Verify fix doesn't break other cases
6. Document: what was the bug, why did it happen, how was it fixed

Examples

Input

Output

Edge Cases & Gotchas

Heisenbug - bug disappears when debugging - Adding console.log changes timing and masks race conditions. Use performance.mark() or non-intrusive logging. In async bugs, try increasing concurrency to make the race more reliable.
Third-party library bug - Before blaming a library, create a minimal reproduction case with only the library - no your code. If the bug reproduces in isolation, file an issue with the minimal reproduction.
Source maps missing in production - Stack traces in production show minified code (bundle.js:1:34123). Ensure source maps are generated and available (privately) for your error tracking tool (Sentry, Bugsnag).
Browser-specific bug - Test in Safari and Firefox - they have different rendering engines and JavaScript environments. What works in Chrome may fail in others.

When to Break These Rules

Use distributed tracing (OpenTelemetry + Jaeger) instead of console logs for bugs that span multiple services - log-based debugging across 5 services is impractical.
Use time-travel debugging (Replay.io, Redux DevTools) for React state bugs where understanding the sequence of state changes is critical.

Reference Files

https://developer.chrome.com/docs/devtools/
https://clinicjs.org/