一、通用排查手段
1.1 二分法删代码调试
这种手段适用于一个正常运行的系统在开发过程中崩溃了，但你无法快速定位到问题所在，就可以把怀疑部分代码全部删除，只保留可以正常执行的代码，然后按二分原则一点点恢复代码，直至排查出引发问题的代码。
适用场景：IE兼容性问题排查，系统崩溃类问题排查
1.2 输出排查
通过写日志文件，console输出，alert输出，或者直接在页面输出需要排查的变量去定位异常数据。输出排查还可以用于异步函数调用出错代码定位，由于异步代码在debugger模式下不容易定位到代码所在位置，可以通过不同的位置进行日志输出，定位代码是否执行和执行顺序，数据准确性等等
适用场景：数据异常类问题排查，异步问题排查，绝大部分问题都可以通过这种方式进行定位排查
1.3 断点排查
最常用的调试手段，通过在代码中写入debugger，或者实现了debugger协议的编辑器、控制台中对应的代码位置注入断点，常用的断点手段如下：
a.F12下通过报错调用栈快速定位问题
适用场景：同步代码调试
b.网络请求报错迅速定位代码
适用场景：
网络请求前后执行报错，请求参数报错
c.条件断点
适用场景：非必现的报错问题排查
d.dom断点
e.事件断点
不太好用，因为事件异步，且现代框架对事件封装严重，比较难定位
1.4 框架OR插件调试
a. vconsole
vconsole是腾讯开源的一个注入式控制台弹窗插件，实现了日志输出，网络状况，dom树查看，性能，控制台等功能，常用于嵌入WebView，移动端调试，IE兼容调试等不方便接入F12面板的环境调试。
适用场景：有UI界面且不方便接入F12的前端页面
b. vue-devtools
c. react devoloper tool
1.5 动态样式调试
部分内容因为有轮询修改页面状态的js代码，导致无法inpect查看dom节点的样式（比如轮播的tips样式），可以通过以下方法调试
a. 通过给setInterval和setTimeout方法替换为空函数，即可禁用轮询，避免dom更改
setInterval = ()=>{} setTimeout = ()=>{}
b. 全局禁用js
二、H5调试
2.1 安卓调试
安卓webview调试使用谷歌的DevTools。在浏览器中输入 chrome://inspect/#devices ，把手机连接上电脑选择调试模式，然后打开相应的app中使用webview的页面，看到如图页面。
注意：
1、需要debug版本的app，安卓要在webview实例中配置允许调试， WebView.setWebContentsDebuggingEnabled(true);
2、由于该功能需要到墙外加载相应的手机调试包，故你需要翻墙才可以实现本方法
3、 连接手机后，Remote Target中会出现需要调试等手机，点击inpect即可通过谷歌浏览器去调试手机的网页
2.2 IOS调试
ios版本的webview调试就比较方便，依靠于safari，不需要翻墙。
a.在Safari的偏好设置中选择“高级”，在底下的“在菜单栏中显示开发菜单”打钩。
b.在iphone的Safari设置中勾选 “JavaScript”和“web检查器”
c.手机上打开相应的app的webview页面，连接电脑，活动区在Safari时点击“开发”菜单即可看到自己的iphone，选中后看到当前的webview页面地址，打开即可弹出页面调试窗口。
三、node调试
3.1 使用vscode调试scripts命令
使用vscode调试scripts命令，或者修改launch.json自定义入口文件
3.2 直接使用debug terminal调试文件
3.3 浏览器调试
1.打开chrome://inspect/#devices，点击Open dedicated DevTools for Node
2.终端中执行命令增加 --inspect-brk参数
四、网络调试
- chrome 自带抓包工具chrome://net-export/
具体日志查看和排查方法可以参考这篇文章：关于请求被挂起页面加载缓慢问题的追查
适用场景：网络抓包，接口异常原因定位
2. fiddler等抓包工具抓包
参考文章：
https://www.jianshu.com/p/1157a3c0a45d
京公网安备11010802043424号 京ICP备 2021034386号