JavaScript错误处理依赖try...catch...finally捕获异常，throw抛出错误，支持自定义Error类型，并通过error.name识别常见错误如TypeError、ReferenceError；异步中用Promise.catch或async/await配合try...catch；调试时使用console方法输出信息，开发者工具设断点、查看调用栈，结合debugger语句和Source Maps提升效率。
JavaScript错误处理和调试是开发过程中必不可少的技能。面对运行时错误或逻辑问题，掌握正确的处理方式和调试技巧能极大提升开发效率。以下从错误处理机制和实用调试技巧两个方面进行说明。
JavaScript错误处理机制
JavaScript提供了一套基于异常的错误处理机制，主要通过 try...catch...finally 结构来捕获和处理运行时错误。
try...catch 捕获异常
将可能出错的代码放在 try 块中，一旦发生错误，控制权会立即转移到 catch 块：
立即学习“Java免费学习笔记（深入）”；
try {
JSON.parse('无效的JSON');
} catch (error) {
console.log('解析失败：', error.message);
}
catch 接收一个参数（通常命名为 error），它是一个 Error 对象，包含 message、name 和 stack 等属性。
finally 块
无论是否发生错误，finally 中的代码都会执行，适合用于清理资源或重置状态：
let resource = acquireResource();
try {
doSomething(resource);
} catch (error) {
console.error(error);
} finally {
resource.release(); // 总是释放资源
}
抛出自定义错误
使用 throw 可以主动抛出错误，支持任意类型，但推荐使用 Error 实例：
if (age < 0) {
throw new Error('年龄不能为负数');
}
也可以创建自定义错误类型：
class ValidationError extends Error {
constructor(message) {
super(message);
this.name = 'ValidationError';
}
}
常见的错误类型
JavaScript内置了几种常见的错误类型，了解它们有助于快速定位问题：
- ReferenceError：引用了未声明的变量
- SyntaxError：代码语法错误，无法解析
- TypeError：操作的数据类型不正确
- RangeError：数值超出允许范围，如数组长度为负
- URIError：encodeURI 或 decodeURI 使用不当
在 catch 中可以通过 error.name 来区分错误类型并做不同处理。
异步代码中的错误处理
异步操作（如 Promise 和 async/await）需要特别注意错误处理方式。
Promise 的 catch
fetch('/api/data')
.then(response => response.json())
.catch(error => {
console.error('请求失败：', error);
});
async/await 中使用 try...catch
async function getData() {
try {
const response = await fetch('/api/data');
const data = await response.json();
return data;
} catch (error) {
console.error('获取数据失败：', error);
}
}
注意：await 必须在 async 函数中使用，否则会抛出语法错误。
实用调试技巧
除了错误处理，掌握调试技巧能更快定位问题根源。
使用 console 方法
- console.log()：输出变量值
- console.error()：输出错误信息，通常显示为红色
- console.warn()：输出警告
- console.table()：以表格形式展示数组或对象
- console.group() 和 console.groupEnd()：分组输出日志
设置断点调试
在浏览器开发者工具中：
- 打开 Sources 面板，找到对应 JS 文件
- 点击行号设置断点
- 刷新页面，代码执行到断点处会暂停
- 使用右侧调用栈、作用域变量等面板查看当前状态
- 通过“单步执行”按钮逐步运行代码
利用 debugger 语句
在代码中插入 debugger，浏览器运行到此处会自动暂停：
function processUser(user) {
if (!user.id) {
debugger; // 自动进入调试模式
}
// ...
}
这在动态条件判断中非常有用。
检查网络请求与资源加载
在 Network 面板中可以查看所有请求的状态、响应内容和耗时，排查 404、500 等错误。
启用 Source Maps
如果使用了打包工具（如 Webpack），确保开启 Source Maps，这样可以在开发者工具中直接调试原始源码，而不是压缩后的代码。
基本上就这些。掌握 try...catch、理解常见错误类型、熟练使用开发者工具，就能应对大多数 JavaScript 错误和调试需求。关键是多实践，在真实项目中不断积累经验。
