这是我参与「第四届青训营 」笔记创作活动的第8天
一、Bug与Debug
前端Debug的特点
- 多平台（浏览器、Hybrid、NodeJs、小程序、桌面应用...）
- 多环境（本地开发环境、线上环境）
- 多工具（Chrome DevTools、Charles、Spy-Debugger、Whistle、vConsole）
- 多技巧（Console、BreakPoint、sourceMap、代理...）
二、Chrome DevTools
动态修改元素和样式
可以用以下两种方式强制激活伪类
- 选中具有伪类的元素，点击hov
- DOM树右键菜单，选择Force State
Console
左侧可以选择等级，对日志进行分类查看
- console.table
具象化的展示JSON和数组数据
- console.dir
通过类似文件树的方式展示对象的属性
- 占位符
给日志添加样式，可以突出重要的信息
%s：字符串占位符；%o：对象占位符；%c：样式占位符；%d：数字占位符
Break Point与Watch
- 使用关键字debugger或代码预览区域的行号可以设置断点
- 执行到断点处时代码暂停执行
- 展开BreakPoint列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
- 暂停状态下，鼠标hover变量可以查看变量的值
- 在调试器Watch右侧点击+可以添加对变量的监控，查看该变量的值
Scope与Call Stack
- 展开Scope可以查看作用域列表（包含闭包）
- 展开Call Stack可以查看当前JavaScript代码的调用栈
Source Map
mapping字段存储了源文件和Source Map的映射
- 英文，表示源码及压缩代码的位置关联
- 逗号，分隔一行代码中的内容
- 分号，代表换行
Application
Application面板展示与本地存储相关的信息
- Local Storage
- Session Storage
- IndexedDB
- Web SQL
- Cookie
Performance运用示例
graph TB
页面卡顿 --> 查看FPS指标 --> 寻找性能瓶颈 --> 优化代码
三、移动端H5调试
VConsole
- 日志（Logs）：console.log|info|error|...
- 网络（Network）：XMLHttpRequest，Fetch，sendBeacon
- 节点（Element）：HTML节点树
- 存储（Storage）：Cookies，LocalStorage，SessionStorage
- 手动执行JS命令行
- 自定义插件
使用代理工具调试
原理：
- 电脑作为代理服务器
- 手机通过HTTP代理连接到电脑
- 手机上的请求都经过代理服务器
默认情况下，Charles无法抓取到HTTPS的请求，需要安装证书。
四、常用开发调试技巧
利用代理解决开发阶段的跨域问题
启用本地source map
线上不存在Source Map时可以使用Map Local网络映射功能来访问本地的Source Map文件
五、课后小结
今天学到了很多关于前端的调试技巧，可见写代码不是单单的实现功能，还要保证代码的质量，尽可能减少bug的出现，降低调试的难度。
