JavaScript Debugging Hub

Use the debugging tools available in browsers like Chrome or Firefox. These tools allow you to set conditional breakpoints, inspect variables, and much more.

Conditional breakpoints pause the execution of your code when certain conditions are met (like a variable reaching a certain value). Instead of manually pausing and checking values or stepping through loads of irrelevant code, you can set a conditional breakpoint to automatically stop right where the action is.

Additionally, browser dev tools enable you to inspect variables, which means you can examine the current values of variables at a specific point in time (e.g., when using conditional breakpoints) when your JavaScript code executes. This helps you understand what your code is doing in real-time, which can be especially useful in complex applications with numerous functions and state changes.

Insert the debugger; statement in your code. When running the code in a browser with the developer console open, execution will pause at the debugger; line, allowing you to inspect the current state. If you suspect part of your code may cause issues, inserting the debugger; statement is a quick way to learn what could be causing the problem.

  function calculateArraySum(numbers) {
    let sum = 0;
    for (let i = 0; i < numbers.length; i++) {
      sum += numbers[i];
      debugger; // Execution will pause here on each iteration
    }
    return sum;
  }

  // Example usage
  calculateArraySum([1, 1, 2, 3, 5, 8, 13, 21])

The try…catch block in JavaScript can handle errors so that they don’t break your code. This approach allows you to catch and log errors or perform specific actions when an error occurs.

function parseJSON(jsonString) {
    try {
        const jsonObj = JSON.parse(jsonString);
        console.log("JSON parsing successful:", jsonObj);
    } catch (error) {
        console.error("Failed to parse JSON:", error);
        // Handle the error or provide fallback logic
    }
}

// Example usage
parseJSON('{"name": "Alice"}');  // Valid JSON
parseJSON('Invalid JSON');       // This will cause an error

In this example, the function parseJSON attempts to parse a JSON string. If the string is not valid JSON, the JSON.parse method will throw an error. The catch block catches this error, allowing the function to handle it, such as by logging an error message without stopping the script or crashing the application.