Debugging Is a Skill, Not Just a Habit

Every developer debugs. But not every developer debugs efficiently. Scattering console.log everywhere is a start — but it's like searching for a lost key by checking every pocket randomly. These 10 tips will make your debugging systematic, fast, and far less painful.

1. Use console.table() for Arrays and Objects

Instead of logging a raw array or object, use console.table() to display it in a readable grid format — perfect for inspecting lists of records.

const users = [{ name: 'Alice', age: 30 }, { name: 'Bob', age: 25 }];
console.table(users);

2. Label Your Logs with console.group()

When debugging complex flows, group related logs together so your console stays organized:

console.group('User Auth Flow');
console.log('Token:', token);
console.log('User ID:', userId);
console.groupEnd();

3. Set Breakpoints in DevTools (Not Just console.log)

Open Chrome/Firefox DevTools, navigate to the Sources tab, find your file, and click a line number to set a breakpoint. Execution will pause there, letting you inspect all variables in scope at that exact moment — no code changes needed.

4. Use debugger; Statements

Drop debugger; directly in your code. When DevTools is open, execution halts at that line — giving you the full power of the DevTools inspector without hunting for the file manually.

5. Watch Expressions in DevTools

In the Sources panel, the Watch section lets you track specific expressions as you step through code. Add things like user.id or items.length to monitor them in real time.

6. Conditional Breakpoints

Right-click a breakpoint in DevTools and add a condition (e.g., i === 42). The debugger only pauses when that condition is true — invaluable when debugging inside loops.

7. Check the Call Stack

When an error occurs, the Call Stack panel in DevTools shows every function that was called to get to the current point. Reading it top-to-bottom tells you exactly how execution arrived at the problem.

8. Use console.error() and console.warn() Intentionally

Instead of logging everything with console.log, use the right level:

  • console.error() — for actual errors (prints in red with a stack trace)
  • console.warn() — for unexpected but non-fatal situations
  • console.info() — for informational messages

This makes filtering your console output much easier.

9. Isolate the Problem with a Minimal Reproduction

If you can't figure out what's wrong, strip everything away until you have the smallest possible example that still shows the bug. This process alone often reveals the cause — and it's essential if you need to ask for help or file a bug report.

10. Read the Error Message (Carefully)

This sounds obvious, but many developers glance at errors rather than reading them. Pay attention to:

  • The exact error type (TypeError, ReferenceError, etc.)
  • The file and line number
  • The message itself — it often tells you exactly what went wrong

Build a Debugging Mindset

Great debugging is about forming hypotheses and testing them methodically. Ask: What did I expect to happen? What actually happened? Where could the difference be introduced? These questions, combined with the tools above, will cut your debugging time dramatically.