JavaScript: JavaScript Errors and Debugging

Last updated: 2026-10-13

Writing bug-free code is impossible — even the creator of JavaScript produced the typeof null === "object" bug in just 10 days. So learning to find bugs and handle errors is even more important than learning to write code.

Related BOM Methods：console.error() console.table() console.log() try...catch JSON.parse finally return error catch

1. Error Handling and Debugging

(1) Common Error Types

SyntaxError is caught before code execution (parsing phase). The other three are runtime errors.

(2) try...catch...finally

Use try...catch to catch runtime errors and prevent your program from crashing:

<script>
try {
  const data = JSON.parse('{bad json}');
} catch (error) {
  console.log("Parse failed:", error.message);
} finally {
  console.log("Cleanup work");
}
</script>

The error object in catch has two commonly used properties:

• error.message — a description of the error
• error.name — the error type name

(3) throw — Manually Throwing Errors

try...catch can only catch runtime errors, but business logic errors need to be thrown manually:

<script>
function setAge(age) {
  if (typeof age !== "number" || age < 0) {
    throw new Error("Age must be a positive number");
  }
  console.log("Age set to: " + age);
}

try {
  setAge(-5);
} catch (e) {
  console.log(e.message);
}
</script>

throw can throw any value, but using new Error() or its subclasses is recommended — they include stack trace information.

(4) Custom Error Messages

Use subclasses of Error or custom properties to provide richer error information:

<script>
class ValidationError extends Error {
  constructor(field, message) {
    super(message);
    this.name = "ValidationError";
    this.field = field;
  }
}

try {
  throw new ValidationError("email", "Invalid email format");
} catch (e) {
  console.log(e.name + " [" + e.field + "]: " + e.message);
}
</script>

(5) Browser DevTools (F12)

Breakpoint debugging is the most powerful debugging technique: click a line number in the Sources panel to set a breakpoint, refresh the page, and the code pauses at that point — step through line by line, inspect variables, and examine the call stack.

(6) The console Family

console.table is especially useful for displaying arrays of objects — far more readable than log.

(7) Debugging Tips

• Comment out halves: Comment out half the code, see which half has the problem, and narrow it down step by step
• console.log everywhere: Print variable values at key points — primitive but effective
• Breakpoint debugging: More powerful than console.log — pause execution and modify variables in real time
• Rubber duck debugging: Explain your code line by line to a rubber duck (or a colleague). Often, you'll find the bug halfway through your explanation.

▶ Example: try/catch for JSON Parsing

▶ Example: Custom Errors and Form Validation

▶ Example: Error Types Quick Reference and console Methods

Related BOM Methods：console.error() console.table() console.log() try...catch JSON.parse finally return error catch

❓ FAQ

📖 Summary

• try/catch catches runtime errors; finally always runs, perfect for cleanup
• throw raises errors manually — prefer throw new Error("message") over strings or numbers
• Error objects have name and message properties; the browser console shows the full stack trace
• DevTools (F12): Sources panel for breakpoints, Watch for variables, step-through execution
• Console methods: log/warn/error/table/group/time/timeEnd boost debugging efficiency

📝 Exercises

1. Write a function safeDivide(a, b) that uses try...catch to handle division by zero (hint: dividing by zero in JS doesn't throw — you need to check and throw yourself). Return the result or an error message.
2. Write a function safeJSONParse(str) that parses a JSON string. On failure, return { success: false, error: <error message> }. On success, return { success: true, data: <parsed result> }.
3. Write a function retry(fn, times): execute fn, and if it throws, retry up to times times. If all attempts fail, throw the last error. Implement with try...catch.

Web-Tutorial Tech Team

A team of developers maintaining programming tutorials. Each tutorial is written and reviewed by developers with expertise in that field. We work to keep our content accurate and reliable — if you spot an issue, please let us know.

About Us