Introduction

Errors and bugs are inevitable in programming. What matters is how you handle and debug them. JavaScript provides built-in mechanisms for error handling (like try/catch/finally and throw) and debugging tools (such as developer console, breakpoints, and the debugger keyword). In this post, you will learn:

1. How JavaScript errors are represented
2. How to use try, catch, finally, and throw
3. Common error types and the Error object properties
4. Techniques and tools for debugging JavaScript code

1. JavaScript Errors & Exception Handling

1.1 Error Objects

When an error occurs, JavaScript creates an Error object that has two main properties:

1. name: the type/name of error (e.g. TypeError, ReferenceError, etc.)
2. message: a descriptive message about what went wrong

You can throw custom errors using the throw statement, passing any value you want (string, number, object).

1.2 try / catch / finally

You wrap code that might throw an error with try, and if an error happens, it is caught in catch. Optionally, finally runs code no matter what, whether error happened or not.

Example:

1.3 Throwing Your Own Errors

You can throw errors deliberately to signal invalid states or unexpected inputs:

You can throw built-in Error objects too:

Throwing custom or built-in errors gives you control over error reporting and handling.

1.4 Common Error Types

Some error names you’ll often see are:

1. SyntaxError — code has invalid syntax
2. ReferenceError — using a variable that hasn’t been declared
3. TypeError — performing an operation on incompatible type
4. RangeError — a number outside allowable range
5. URIError — error in URI handling (e.g. invalid percent-escape)

2. Debugging JavaScript

2.1 Why Debug?

Debugging is the process of finding and fixing errors or unexpected behavior in code. In JavaScript, errors sometimes fail silently (no visible effect), which makes debugging critical.

2.2 Using the Console & console.log()

A simple but powerful debugging technique is using console.log() to output variable values or messages to the developer console.

You can also use console.error() for logging errors explicitly:

This helps highlight error messages in the console.

2.3 Breakpoints & Developer Tools

Modern browsers have built-in debugging tools. You can open them (often via F12) and:

1. Set breakpoints in code so execution stops there
2. Inspect variables, call stacks, and state at breakpoints
3. Step line-by-line through code

2.4 The debugger Keyword

You can insert a debugger; statement in your code to force a breakpoint at that location (if a debugger is open). If no debugger is active, it has no effect.

Example:

When the code runs and reaches debugger;, execution will pause if dev tools are open.

3. Putting It Together: Best Practices

1. Always wrap risky code (e.g. I/O, parsing, external operations) in try/catch
2. Use throw for validating inputs or signaling failures
3. Use finally for cleanup tasks (closing connections, releasing resources)
4. Remove or disable console.log() statements in production code
5. Use breakpoints and debugger for deeper inspection
6. Use meaningful error messages to help debugging later
7. Familiarize yourself with your browser’s dev tools (console, sources panel)