返回知识库

调试与质量 · 定位工具

断点Breakpoint

断点会让程序停在指定行,让你检查当时的变量和分支;打在不会走到的行上,等于没停。

先看见登录没反应,再把执行停在校验行

左边是出问题的登录页,右边是 Sources 里的 login.js。停在第 5 行才能看见 password 是空串;打在第 6 行会直接跑完。

第 0 步 · 打开工具先打开开发者工具 → Sources。F12 后点行号打断点,再触发登录
NOVA ACCOUNT继续登录
邮箱ada@studio.test
密码""
!

点登录没反应用户仍然看不到字段错误

login.js
RUNNING
  1. 3if (email === "") {
  2. 5if (password === undefined) {
  3. 6errors.password = "required"
Scope还没有停住断点要打在会走到的判断上

还没停在关键行函数一闪而过。下一步:停在会走到的判断上,才能看见真实值。

断点让程序在指定行暂停。黄条和作用域长在源码上;打偏就跑完,恢复是把断点移回会走到的那一行。

知识点:停在会走到的判断上

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

  • 断点打在可疑判断,而不是「看起来像错误提示」的下一行。
  • 暂停后读 Scope:空串、undefined 和 false 必须看见,不能靠猜。
  • 打偏就 FINISHED;恢复是把断点移回实际会执行的那一行。

什么时候用、怎么用

变量一闪而过、分支走错、或你需要看见调用当下的真实值时用断点。

  • 入口:打开开发者工具的 Sources,点行号,再触发同一登录。
  • 最短路径:选会走到的行 → 复现 → 读 Scope → 单步看下一跳。
  • 不要在压缩后的 vendor 行上盲打;先回到源码映射。

正反例:同一空密码,只改断点打在哪一行

目标都是看清为什么没有字段错误。差别只在有没有停在比较发生的地方。

正例停在 L5,看见 password = ""

条件是 === undefined,空串为 false,所以错误分支没走。修复方向立刻清楚。

反例断点打在 L6,函数直接跑完

第 6 行从未执行,作用域是空的,只能再猜一次「是不是没进函数」。

快速自测

空密码登录没有提示。你已经能复现,下一步最该把断点打在哪?

继续查证

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

下一步学

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