JavaScript 错误对象提供了一个有关 JavaScript 运行时错误的详细信息集合。理解并充分利用这些对象对于识别、隔离和解决代码中的问题至关重要。本文将探讨如何使用 Chrome DevTools 的 Console 和 Sources 面板，从 JavaScript 错误对象中提取有用信息，从而进行高级调试。
使用 Console 面板
当 JavaScript 代码中发生错误时，Console 面板会显示一个错误对象。该对象包含以下属性：
- message： 提供有关错误的简要说明。
- name： 错误的名称，例如 TypeError 或 SyntaxError。
- lineNumber： 错误发生的代码行号。
- columnNumber： 错误发生的代码列号。
- stack： 一个调用堆栈，显示错误发生时的函数调用顺序。
代码演示：
const numbers = [1, 2, 3];
console.log(numbers[10]); // Uncaught TypeError: Cannot read properties of undefined (reading "10")在上面的示例中，当尝试访问超出数组边界范围的元素时，会引发 TypeError。Console 面板会显示以下错误对象：
Error: Cannot read properties of undefined (reading "10")
at <anonymous>:1:23此错误对象的 message 属性为 "Cannot read properties of undefined (reading "10")"，lineNumber 属性为 1，columnNumber 属性为 23。
使用 Sources 面板
Sources 面板提供了更多关于错误对象的详细信息，其中包含：
- Error Object： 在 Console 面板看到的同个错误对象。
- 预览： 错误对象属性的交互式预览。
- 调用堆栈： 调用堆栈的图形表示，显示错误发生的函数调用路径。
代码演示：
使用Sources 面板，我们可以查看上述示例中的调用堆栈：
Call Stack
at :1:23此调用堆栈指示错误发生在脚本的第一行，第 23 列。
利用堆栈跟踪
调用堆栈提供了识别错误根源的有价值信息。通过逐层分析堆栈帧，我们可以确定哪个函数引发了错误，以及传递给它的参数。对于异步代码，堆栈跟踪还可以揭示错误发生时的执行上下文。
代码演示：
function outer() {
try {
inner();
} catch (err) {
console.log(err.stack);
}
}
function inner() {
throw new Error("An error occurred!");
}
outer();在上面的示例中，inner() 函数引发了一个错误，该错误被outer() 函数捕获并记录到控制台中。调用堆栈将显示如下：
Error: An error occurred!
at inner (:16:6)
at outer (:10:5)此堆栈跟踪表明错误发生在 inner() 函数的第 16 行，第 6 列，由 outer() 函数在第 10 行，第 5 列调用。
总结
深入了解 JavaScript 错误对象及其属性对于有效地调试代码至关重要。通过利用 Chrome DevTools 的 Console 和 Sources 面板，我们可以提取有关错误的宝贵信息，包括错误消息、行号、列号和调用堆栈。通过分析这些信息，我们可以准确地识别、隔离和解决代码中的问题，从而提高应用程序的稳定性和用户体验。
