Introduction to Debugging

Debugging is the process of finding and fixing defects in code. Every developer spends a large part of their time debugging — doing it systematically rather than randomly is one of the most valuable skills you can build.

The debugging mindset

Bad debugging is random: changing things and hoping. Good debugging is methodical:

1. Reproduce the bug reliably.
2. Locate where it happens.
3. Understand why it happens.
4. Fix the root cause (not just the symptom).
5. Verify the fix and that nothing else broke.

The humble console.log

The simplest tool: print values to see what your code is actually doing.

console.log("user:", user);
console.log("Reached checkpoint A", { count, items });

console.table(arrayOfObjects); // formatted table
console.error("Something failed:", error); // red, with stack trace
console.warn("Deprecated usage");

Reading error messages

Error messages are your friends — read them carefully. A typical error tells you the type, a message, and a stack trace:

TypeError: Cannot read properties of undefined (reading 'name')
    at UserCard (UserCard.jsx:5:23)
    at renderList (App.jsx:18:10)

This says: you tried to read .name on something undefined, on line 5 of UserCard.jsx. The stack trace shows how the code got there.