# 8. 断点调试总结
- 断点调试用法总结我根据端的不同，分为了浏览器端、Vscode、微信小程序。
# Chrome 浏览器
总结自：使用断点调试代码 (opens new window)
js 断点调试心得（以 chrome 浏览器为例） (opens new window)
首先，我们还是先对断点的类型进行分类，何时使用何种类型的断点：
Line-of-code： 运行到 DevTools 代码里要打点的具体区域；
Conditional line-of-code ： 知道在 DevTools 代码里要打点的具体区域且设置条件，只有为真才执行断点操作；
DOM： 在 body 中添加，检测节点或其子节点的增删和属性变化；
XHR： 在 xhr url 包含特定内容的时候打点；
Event listener： 在触发特定事件的时候打点；
Exception： 在抛出异常的时候打点；
Function： 在特定函数被调用的时候打点；
debugger： 在书写的代码里希望打点的时候手动打点； 作者：威少_吴 链接：https://www.jianshu.com/p/e6ba1fee8e7d 来源：简书 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
# Line-of-code breakpoints（解析到打点的代码之前）
浏览器会执行解析操作到打点的那行代码之前（不包含那行代码）。
操作： f12 -> Sources -> 双击打开需要打点的文件 -> 找到需要打点的那行代码 -> 在行数上单击，出现一个蓝色标记，打点完成。
在标记上再次单击，会删除当前断点。（在代码中输入 debugger 同样能在指定位置暂停）
- 这是我比较常用的一种调试方式。打好断点之后，重新运行程序，然后我就可以在特定的断开，然后在左下角看当前作用域里面的数据。
# Conditional line-of-code breakpoints（条件判断）
操作： f12 -> Sources -> 双击打开需要打点的文件 -> 找到需要打点的那行代码 -> 右键行数，选择 Add conditional breakpoint -> 在出现的对话框中输入条件 -> 点击 enter，出现橙色标志，打点完成。
# DOM change breakpoints（观察 DOM 节点）
在文档节点发生变化的时候暂停。
操作： f12 -> Elements -> 点击希望监测的节点 -> 右击节点 -> 在出现的菜单上选择 Break on -> 按需要选择 Subtree modifications,Attribute modifications, Node removal。
dom 改变断点类型：
● Subtree modifications ， 在当前节点的*子节点*发生增加、移除、内容改变、交换顺序的情况的时候生效。其他情况例如当前节点发生了变化，或者子节点的属性发生了变化都不会触发。
● Attributes modifications ， 在当前节点的属性发生变化，例如增加属性、移除属性、属性值改变 的时候触发。** **
● Node Removal ， 在当前节点被移除的时候触发。
# XHR breakpoints (监听 xhr 请求）
在你希望监听特定的 xhr 请求的时候，使用 xhr breakpoints 。 指定特定的字符串，当有包含此字符串的 xhr url 出现时触发，DevTools 会在 xhr.send() 方法被调用的地方暂停。
xhr breakpoints 对 fetch 请求也有效。
对于一些被封装好了的 xhr 请求例如 JQuery 的 ajax 方法，浏览器无法定位到被调用的地方。
操作： f12 -> Source Tab -> XHR Breakpoints 面板 -> 点击 + 号 -> 在出现的对话框里输入指定的字符串，浏览器会在出现包含此字符串的 xhr 请求时暂停（无论字符串在 url 的哪个位置） -> enter ， 完成断点。
# 管理断点
另外，可以在 BreakPoints (不是下面的 XHR Breakpoints)面板上统一管理所有的断点。
# Event listener breakpoints（监听事件,如 click）
监测事件，在事件发生后暂停，断点到事件绑定的位置。支持单独的事件例如 click ， 也支持一整个类别的事件，例如所有的鼠标事件。
操作： f12 -> Source Tab -> 展开 **Event Listener Breakpoints 面板，**会列出所有能监听的事件 -> 全选或展开之后单独选事件，完成断点。
# Function breakpoints（监听具体的 Function）
有两种方法：
一：代码里插入：
function sum(a,b){
let result = a+b; // 浏览器在这里暂停
return result;
};
debug (sum); // 参数是一个函数，不是字符串
sum();
二：控制台调用：
控制台输入 debug(sum)，点击 enter，再触发一次 sum 操作，就进入断点页面。
要注意确保目标函数与 debug 函数在同一个作用域里面，否则会报 ReferenceError：（所以我个人不建议这么使用，经常会出现不同一个作用域的情况。）
# Exception breakpoints（监听 error 事件）
当我们想在某一行抛出 caught or uncaught 异常时进入断点，可以使用 exception breakpoint。
- 1.单击 Sources tab
- 2.单击 Pause on exceptions 上，也就是
- 3.选中 Pause On Caught Exceptions，可以使得捕获的异常也进入断点。
# 什么是 caught 和 uncaught 的 exception？
- 通过 throw，catch 对 exception 做处理的，属于 caught exception
- 没有对异常做捕获的 exception，可能导致程序崩溃的 exception，就属于 uncaught exception
默认捕获的异常时 uncaught 类型，开启 Pause on caught exceptions，会让 uncaught 和 caught 类型的均进入断点。
# 按钮相关
说完 debug 方法有几种，接下来再说一下一些按钮的具体用法吧。
# 一：两个小符号
首先说一下右边的小箭头，这个小图标的功能叫“逐语句执行”或者叫“逐步执行”，每点击它一次，js 语句就会往后执行一句，它还有一个快捷键，F10。
以断点为步长执行代码（注意，下一步也可能是当前断点处)，快捷键 F8；
# 二：观察变量
如果在调试过程中想观察某个变量的动态变化，选中该变量并“Add selected text to watches”，即可在右侧 watch 出监视该变量（也可以点“+”输入变量名添加）。（常用在循环、以及一些中间量）
# Vscode
在看完 chrome 浏览器的调试用法，我想再总结一下 Vscode 的断点调试。主要是因为现在 webpack 打包流行，但是编译后的代码找起来却没有那么容易了，遇到 bug 打断点找不到代码就成了前端一个痛点。最好的解决办法就是在 vscode 里面直接 debug。
- 首先下载插件 Debugger for Chrome
- 在调试面板创建 launch.json 文件。然后选择 Chrome。（因为我的项目是 Web 端的）
- 如果是 webpack 之类的文件，需要先运行起来，我是测试用，所以我会
npm run dev。