手动打断点
适用于自己知道问题在哪一块
设置好断点之后，需要认识几个地方
1.操作栏
从左往右记作a b c d
a: 点击之后会进入下一个断点，适合不想一步步走，想直接跳到下一个断点
b: 如果这一行里有函数调用，不会进入函数内部。适用场景：不关心函数内部实现，只想看当前函数的整体执行流程
c: 会进入函数内部
d: 把当前函数剩余代码一次性执行完，从进入的函数跳出
2.监控
可以添加自己想要监控的变量，如图： num1
3.断点
可以对断点进行操作
4.作用域
查看变量的值
5.调用堆栈
看正在调用的方法
特殊类型断点
无需手动在代码打行断点，就能精准捕获特定场景，尤其适合调试 “不知道哪里出问题” 的复杂场景
| 断点类型 | 作用 | 典型场景 |
|---|---|---|
| XHR / 提取断点 | 当 XMLHttpRequest 或 Fetch 请求的 URL 包含指定字符串时触发断点 | 调试接口请求失败（如 404/500）、查看请求参数 / 响应数据、拦截接口调用 |
| DOM 断点 | 当指定 DOM 元素被修改（属性变化、子节点增减、元素被移除）时触发断点 | 调试 “莫名消失的元素”“突然变化的样式”，定位谁在修改 DOM |
| 全局监听器 | 监听全局函数（如 setTimeout/setInterval/Promise）的调用 / 返回 | 调试 “定时任务没执行”“Promise 状态异常”，查看异步操作的触发时机 |
| 事件监听器断点 | 当指定事件（如 click/scroll/input）触发时触发断点 | 调试 “按钮点击没反应”“滚动事件异常”，定位事件处理函数是否被正确调用 |
| CSP 违规断点 | 当页面违反内容安全策略（CSP）时触发断点 | 调试 “脚本 / 图片加载失败”，排查 CSP 规则配置问题 |
- XHR / 提取断点
输入想要检测的网络请求包含的字段，然后触发 XHR 断点后，先看 “谁调用了接口（调用堆栈）”→再看“调用时的参数对不对（作用域）”→最后去 Network 面板看“接口实际发了什么、返回了什么”，就能快速定位接口相关的问题啦～
- 事件监听器断点
选择要监测的事件，如图，点触发点击事件时，就会出现断点
补充断点技巧
1.可以添加日志点，条件断点
如图，通过添加日志点，可以查看在控制台res这个变量的值
后续有补充再进行补充
