How to Debug Code Step by Step — Beginner-Friendly Guide

// ❌ Bad debugging — log tells you nothing
function processUser(user) {
  console.log("here"); // tells you the code reached this line — that's it
  return user.name.toUpperCase();
}

// ✅ Good debugging — log type AND value
function processUser(user) {
  console.log("[processUser] user:", typeof user, user);
  console.log("[processUser] user.name:", typeof user?.name, user?.name);
  return user.name.toUpperCase();
}

// ✅ Even better — JSON.stringify for deep object inspection
function processOrder(order) {
  console.log("[processOrder] INPUT:", JSON.stringify(order, null, 2));
  const result = calculateTotal(order.items);
  console.log("[processOrder] OUTPUT:", result);
  return result;
}

// ✅ console.table for arrays of objects — renders as a table in DevTools
const users = [
  { id: 1, name: "Alice", role: "admin" },
  { id: 2, name: "Bob", role: "user" }
];
console.table(users);  // Much easier to read than console.log for arrays

// ✅ Conditional logging — only log when condition is true
const DEBUG = process.env.NODE_ENV !== 'production';
const log = (...args) => DEBUG && console.log('[DEBUG]', ...args);

// ✅ console.time for performance debugging
console.time('fetchUsers');
const users2 = await fetchUsers();
console.timeEnd('fetchUsers'); // prints: "fetchUsers: 342ms"

// ✅ console.error for errors (shows red in console)
// ✅ console.warn for warnings (shows yellow)
// ✅ console.group / console.groupEnd for organized output

// ❌ Classic async bug — missing await
async function getUser(id) {
  const user = fetchUser(id);  // ❌ forgot await — user is a Promise, not a User
  console.log(user.name);      // TypeError: Cannot read property 'name' of undefined
}

// ✅ Fix: add await
async function getUser(id) {
  const user = await fetchUser(id);  // ✅ waits for the Promise to resolve
  console.log(user.name);            // "Alice"
}

// ❌ Lost error in Promise chain
fetchUser(id)
  .then(user => processUser(user))
  // If processUser throws, the error is silently swallowed
  .then(result => saveResult(result));

// ✅ Always catch errors
fetchUser(id)
  .then(user => processUser(user))
  .then(result => saveResult(result))
  .catch(error => {
    console.error('[getUser] failed:', error.message, error.stack);
    // Now you see the error instead of silent failure
  });

// ✅ With async/await + try/catch
async function processAndSave(id) {
  try {
    const user = await fetchUser(id);
    const result = processUser(user);
    await saveResult(result);
  } catch (error) {
    console.error('[processAndSave] error at step:', error.message);
    throw error;  // re-throw so the caller knows it failed
  }
}

// ✅ Debugging parallel async operations
const [user, orders, payments] = await Promise.all([
  fetchUser(id).catch(e => { console.error('fetchUser failed:', e); return null; }),
  fetchOrders(id).catch(e => { console.error('fetchOrders failed:', e); return []; }),
  fetchPayments(id).catch(e => { console.error('fetchPayments failed:', e); return []; }),
]);
// Individual catches let you see which request failed