JavaScript Debugging

Console Methods for Debugging

The console object provides several methods to help with debugging:

console.log()

// Basic logging
console.log("Hello, debugging world!");

// Logging multiple values
console.log("User:", user, "Status:", status);

// String substitution
console.log("User %s has %d points", username, points);

console.error() and console.warn()

// Log errors
console.error("This is an error message");

// Log warnings
console.warn("This is a warning message");

console.table()

// Display tabular data
const users = [
  { name: "John", age: 30, role: "Developer" },
  { name: "Jane", age: 28, role: "Designer" },
  { name: "Bob", age: 35, role: "Manager" }
];

console.table(users);

console.time() and console.timeEnd()

// Measure execution time
console.time("Array initialization");
const arr = new Array(1000000);
for (let i = 0; i < arr.length; i++) {
  arr[i] = i;
}
console.timeEnd("Array initialization");

Debugging with Browser DevTools

Modern browsers provide powerful developer tools for debugging JavaScript:

Setting Breakpoints

// You can set breakpoints in the Sources panel of DevTools
// Or use the debugger statement in your code
function calculateTotal(items) {
  let total = 0;
  for (let i = 0; i < items.length; i++) {
    debugger; // Execution will pause here when DevTools is open
    total += items[i].price;
  }
  return total;
}

Conditional Breakpoints

In the browser's DevTools, you can set breakpoints that only trigger when a specific condition is met:

• Right-click on the line number in the Sources panel
• Select "Add conditional breakpoint"
• Enter a condition like i === 5 or user.name === "John"

Watch Expressions

In the DevTools debugger, you can add expressions to the Watch panel to monitor their values as you step through code.

Call Stack and Scope

When paused at a breakpoint, you can examine:

• The call stack to see how you got to the current point
• The current scope variables
• Global variables

Common Debugging Techniques

Try-Catch Blocks

try {
  // Code that might throw an error
  const result = riskyOperation();
  processResult(result);
} catch (error) {
  // Handle the error
  console.error("An error occurred:", error.message);
  // Optionally log the stack trace
  console.error(error.stack);
}

Error Objects

// Creating custom errors
class ValidationError extends Error {
  constructor(message) {
    super(message);
    this.name = "ValidationError";
  }
}

function validateUser(user) {
  if (!user.name) {
    throw new ValidationError("User name is required");
  }
  if (!user.email) {
    throw new ValidationError("User email is required");
  }
}

Source Maps

When working with transpiled or minified code, source maps help you debug the original source code instead of the transformed code.

// In webpack.config.js
module.exports = {
  // ...
  devtool: 'source-map',
  // ...
};

Debugging Asynchronous Code

Async/Await

async function fetchUserData() {
  try {
    const response = await fetch('/api/user');
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json();
    console.log('User data:', data);
    return data;
  } catch (error) {
    console.error('Fetch error:', error);
    throw error;
  }
}

Promise Debugging

fetchData()
  .then(data => {
    console.log('Data received:', data);
    return processData(data);
  })
  .then(result => {
    console.log('Processing result:', result);
    return saveResult(result);
  })
  .catch(error => {
    // This will catch errors from any of the above promises
    console.error('Error in promise chain:', error);
  });

Performance Debugging

Performance Panel

Use the Performance panel in DevTools to record and analyze runtime performance:

• CPU usage
• Memory consumption
• JavaScript execution timeline
• Layout and rendering events

Memory Panel

Use the Memory panel to identify memory leaks and excessive memory usage:

• Heap snapshots
• Allocation timelines
• Object retention paths

Best Practices for Debugging

• Reproduce the issue: Create a minimal test case that demonstrates the problem.
• Divide and conquer: Use binary search to isolate the problematic code.
• Check recent changes: Often bugs are introduced by recent code changes.
• Read the error message: Error messages often contain valuable information about what went wrong and where.
• Use version control: Git bisect can help find which commit introduced a bug.
• Rubber duck debugging: Explain the problem to someone else (or an inanimate object) to clarify your thinking.
• Take breaks: Fresh eyes often spot issues that tired ones miss.

Debugging Tools and Extensions

• React DevTools: For debugging React applications
• Redux DevTools: For debugging Redux state management
• Vue.js DevTools: For debugging Vue.js applications
• Augury: For debugging Angular applications
• Lighthouse: For auditing performance, accessibility, and more