这是我参与「第五届青训营 」伴学笔记创作活动的第 10 天
调试这个事情不管是什么程序员都是不可跳过的步骤，课程甚至专门拿出一节课的时间来讲这个问题。
PC端调试
bug与debug
bug的产生
- 最早的bug是1947年测试一个计算机时发现的一只虫子，拿掉它机器就能运转了，拿掉的过程可以理解成debug
- bug无处不在，有时会成为新功能……
前端debug特点
- 多平台
- 多环境
- 多工具
- 多技巧
Chrome DevTools
- Elements 动态修改元素和样式，就是在其中删删改改能直接在浏览器上展示出效果，而刷新页面后又能清除这些修改。
- 当某些样式是需要触发才会出现时可以右键选择强制状态。
- 可以筛选类名之类的
- 甚至可以邮件截屏
- Console 日志
- 直接输出，有log, warn, error等多种输出方式
- .table, .dir之类的还能更具体的展示数据
- 不同数据类型会有不同显示颜色
- 甚至可以把输出添加样式……
- Source 类似小的编辑器
- 最左边是页面资源文件目录树
- 中间是代码资源预览
- 右面有debug工具和断点调试等
- 展开Scope查看作用域列表（和闭包）
- 展开Call Stack查看调用栈
- 压缩后的代码呢
- 使用source map进行对照查找
- 上线时带着map压缩，把map部分传到其他监控平台
- Network 调试网络请求
- 查看并筛选各种请求
- 模拟弱网环境
- 前后端甩锅时可以直接查看接口返回数据
- Application 处理存储部分
- 比如在Storage里面直接清缓存，应对一些奇奇怪怪的报错会很有用
- Performance 网页性能相关
- 应该是后续优化需要查看吧
- 比较重要的指标比如fps指标，正常显示器刷新频率大概60
- Lighthouse 也是性能指标
- 有测试评分
- 有优化建议
移动端调试
真机调试
- ios和安卓可以使用不同方式进行真机调试
- 使用VConsole调试
- 使用代理调试，以电脑为服务器，手机走电脑代理，可以查看所有请求
其他技巧
nodejs调试
Inspector Protocol + Chrome Devtool，有点像上面的Source
利用代理解决跨域调试
过于深奥暂时没有接触……
使用本地source map
代理工具链接本地source map
使用代理工具Mock数据
阿巴阿巴阿巴……
