阅读堆栈跟踪
追踪错误的源头。
阅读堆栈跟踪 是 CoddyKit 上的免费 JavaScript Academy 课时。 这是第 4 节课,共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 JavaScript Academy 学习路径的一部分,你的进度在网页和 CoddyKit 应用中同步。 JavaScript Academy 课程共包含 4 节课。
什么是堆栈跟踪
堆栈跟踪是在发生错误时处于活动状态的函数调用列表。它显示了程序到达失败位置所经过的路径。
从上到下阅读
跟踪中的顶部栈帧就是抛出错误的位置。下面的每一行显示一个调用者,一直向下追溯到程序最初的入口点。
栈帧结构
每个栈帧通常会列出函数名称、调用发生的文件、行号和列号,从而精确定位位置。
错误消息
栈帧上方会显示错误名称和消息,例如描述问题所在的 TypeError。请先阅读这部分,它通常会解释错误原因。
function getName(user) {
return user.name
}
// calling getName with undefined would throw a TypeError
console.log("Reading the message tells you what failed")跟踪调用链
向下阅读可以重建调用顺序:哪个函数调用了哪个函数,最终到达失败的那一行。
您的代码与库代码
跟踪通常会包含库代码的栈帧。请关注最顶部且属于您自己源文件的栈帧,因为修复通常就在这个位置。
异步堆栈跟踪
现代 DevTools 会将异步调用连接起来,显示异步操作或计时器的起始上下文,因此跟踪不会在边界处中断。
手动生成跟踪
console.trace 会打印当前调用栈,但不会抛出错误,这有助于您了解函数是如何被调用到的。
function inner() {
console.trace("reached inner")
}
function outer() {
inner()
}
outer()错误堆栈属性
错误对象包含一个堆栈属性,其中以文本形式保存跟踪信息,您可以将其记录下来或发送给错误报告服务。
const err = new Error("Something failed")
console.log(typeof err.stack)压缩代码与源映射
生产代码通常会被压缩,因此跟踪信息难以理解。源映射会将压缩后的位置映射回原始文件,从而生成易读的跟踪信息。
从跟踪到修复
结合错误消息、最顶部的用户代码栈帧和行号来定位错误。然后检查该处的变量,以确认原因。
快速检查
测试您对堆栈跟踪的了解。
回顾
回顾:堆栈跟踪会揭示通往错误的路径。
- 顶部栈帧是抛出错误的位置
- 下面的栈帧是调用者
- 请关注自己代码中最顶部的栈帧
- 源映射可以让压缩后的跟踪信息变得易读
const err = new Error("fail")
console.log(typeof err.stack)常见问题解答
「阅读堆栈跟踪」课时是免费的吗?
是的 — 「阅读堆栈跟踪」的完整文本可在网页上免费阅读。要进行交互式练习(内置代码编辑器和全天候 AI 导师)并解锁 JavaScript Academy 课程的其余内容,请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 4 节课。
「阅读堆栈跟踪」这节课中我会学到什么?
追踪错误的源头。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy,全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 JavaScript Academy 需要有经验吗?
无需任何先前经验。CoddyKit 上的 JavaScript Academy 课程适合初学者到高级学习者,你可以从这里开始或从头开始,按照自己的节奏学习。 这是第 4 节课,共 4 节。
「阅读堆栈跟踪」课时需要多长时间?
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动,所以你能稳步进步,并在网页和应用中从离开的地方继续。
我能在这节 JavaScript Academy 课中编写并运行代码吗?
能。每节 JavaScript Academy 课都包含内置代码编辑器,你可以在浏览器中直接编写并运行真实代码,并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- 超越 console.log
- 设置断点
- 逐步执行代码
- 阅读堆栈跟踪