返回知识库

调试与质量 · 定位工具

调用栈Stack Trace

调用栈从抛错点往下列出函数路径;跳过框架帧后,第一个业务帧才是该改的入口。

先看见结账崩溃,再从调用栈往下找业务帧

左边是炸掉的支付页,右边是这次 TypeError 的 Call Stack。打开后会标出 submitOrder;点到 vendor 会变成无法定位。

第 0 步 · 打开工具先打开开发者工具 → Console,点开红色 TypeError,或到 Sources 看 Call Stack
NOVA CHECKOUT确认支付
夏季衬衫 × 1¥ 269
!

支付崩溃 · TypeErrorchargeCard 读到 undefined,支付按钮停住

Call Stack
等待打开这次崩溃
还没有帧打开这次崩溃后,栈会从炸点往下列出。
这一帧的值打开崩溃后才会出现

还不能开始改结账页已经炸了。下一步:打开调用栈,从栈顶往下找第一个业务帧。

调用栈记录错误发生时的函数路径。局部变量长在选中帧上;卡在 vendor 的原因是压缩帧无法定位,下一步跳回业务帧恢复。

知识点:栈顶是炸点,业务帧才是入口

上面的工作台已经演示了核心关系,这里只给可复用的命名。

  • 栈顶告诉你在哪抛错,不一定是你该改的地方。
  • 往下跳过框架和压缩帧,第一个业务文件才是入口。
  • 选中帧后读局部变量:值在哪一帧变坏,就从哪一帧修。

什么时候用、怎么用

红字 TypeError、白屏或支付中断时,先读调用栈,而不是只复制最后一行报错。

  • 入口:打开开发者工具的 Console,点开红色错误,或到 Sources 看 Call Stack。
  • 最短路径:打开这次崩溃 → 跳过 vendor → 选首个业务帧 → 读该帧变量。
  • 不要在 vendor.min.js 里改代码;行号对不上,也无法验证。

正反例:同一支付崩溃,只改你点开哪一帧

目标都是找到 order 变成 undefined 的地方。差别只在有没有停在业务帧。

正例选中 submitOrder,看见 order = undefined

值在传给支付库之前已经坏了,修复入口在自己的结账代码,不在第三方。

反例卡在 vendor.min.js 或只抄栈顶

压缩帧无法定位,只会在第三方里空转;栈顶 chargeCard 只是最后读到空值的地方。

快速自测

支付页报 TypeError,栈顶在第三方 chargeCard。你该先看哪一帧?

继续查证

术语的技术定义和行为以这些一手或权威资料为准。

下一步学

和本知识点经常一起出现的概念。