[!info] related notes

• 所属 MOC: DevTools Sources MOC
• 前置概念: Sources 面板
• 并列概念: 调用栈与作用域
• 关系笔记: 浏览器开发者工具

DevTools 断点调试

一句话定义

断点调试是在代码执行到关键位置时强制暂停，让你看清“这一刻的状态到底是什么”。

核心内容

常见断点类型

• 行断点：最基础，适合先拦住一条关键语句
• 条件断点：只在满足条件时暂停，适合循环或高频代码
• DOM 断点：适合追踪谁改了节点、属性或子树
• XHR / Fetch 断点：适合拦截接口发起点
• Event Listener 断点：适合查点击、键盘、定时器等事件入口

实用下断点顺序

1. 先找最靠近异常结果的位置
2. 如果触发频率太高，改成条件断点
3. 如果不知道是谁触发行为，先试事件或请求断点

边界与易混淆点

• 断点不是越多越好，过多会打乱时序
• 条件断点能减少噪音，但表达式本身也要可控
• 如果你还不知道变量从哪来的，下一步就该看 调用栈与作用域

Related notes

• DevTools Sources MOC
• Sources 面板
• 调用栈与作用域
• 浏览器开发者工具