JavaScript Intermediate Day 7: Error Handling & Debugging

Goal of this Day

Today you will learn:

• How to handle errors in JavaScript
• Using try...catch blocks
• Debugging in the browser
• Common JavaScript errors and how to fix them

By the end, you will be able to catch errors and debug code effectively.

Step 1: try...catch

Use try...catch to safely handle errors:

try {
  JSON.parse("invalid");
} catch (error) {
  console.log("Error caught!");
}

Explanation:

• try block contains code that might throw an error
• catch block runs if an error occurs
• You can access the error object to get details

Step 2: Debugging in Browser

Use browser developer tools to debug:

• Open console (F12 in Chrome)
• Use console.log() to inspect variables
• Set breakpoints in the Sources tab

Step 3: Common Errors

• SyntaxError: code is not valid JavaScript
• ReferenceError: variable is not defined
• TypeError: wrong type for operation

Practice

try {
  JSON.parse("invalid");
} catch (error) {
  console.log("Error caught!");
}

Task

Write code that handles an error safely:

function safeParse(json) {
  try {
    return JSON.parse(json);
  } catch (error) {
    console.log("Invalid JSON:", error.message);
    return null;
  }
}

// Example usage
const data = safeParse('{"name": "John"}');
const badData = safeParse("invalid");