浏览器断点调试技巧

一、前言

日常开发中，当业务测试数据展示有问题时，我们需要快速去排查问题出现原因；但看了自己写的逻辑，很自信的觉得没问题但最终展示和逻辑对不上。这个需要我们便可以利用浏览器断点调试功能，来逐步调试对比逻辑来排查问题。

二、调试须知

之前有总结过浏览器的控制台操作手册，在此之前可以回顾一下，调试主要用到是Network(网络)与Sources(源代码模式)。Chrome控制台操作手册入口

2.1 Network(网络)

当页面一加载时浏览器就会想目标服务器发起网络请求，去获取页面所需的静态资源与数据。平常我们使用的最多的就是查询请求API来查看接口的传参与返回，而这次我们主要是看请求返回的页面文档，通过请求的文档的接口地址去Sources中查到具体代码。

2.2 Sources(源代码模式)

通过请求文档接口地址，来到源码中查找具体位置即可找到对应页面的源码。

找到页面源码后便可根据页面逻辑进行代码断点调试。

注意：有些网页文档是通过代码编译之后上传到服务器上的，这种情况无法进行断点调试。

三、断点调试

通过前面描述我们找到了页面的源码信息，这个时候只需要找到问题调用的逻辑代码进行调试即可。

3.1 断点功能按钮

图例：

如图所示我们在接口请求后增加了断点，当程序走到时便会进入断点，程序就暂停执行；同时触发右侧断点功能按钮生效。

3.2 数据变量

图例：

进入断点后可以看到当前函数作用域下的变量信息，还有全局变量的数据；通过当前的数据展示可以判断接口传参是否正确，后台返回的数据是否正常渲染，可以更快的排查出问题。

四、补充

有时候业务反馈点击某个按钮或是某个功能时页面会突然空白，或是突然刷新了页面。这个时候反馈给你，这种情况肯定是因为报错导致的，但页面重新刷新控制台信息会清空无法查看日志。这个时候就有两种解决方案：

4.1 保留控制台、网络请求输出日志

4.2 源码中打开异常信息断点调试