01. Bug与Debug
Bug的诞生
- First Bug: First actual case of bug being found.
- Bug or feature: That's not a bug, it's a feature resquest.
- Node Code, No Bug
前端debug的特点
- 多平台：浏览器、hybrid、NodeJS、小程序、桌面应用等
- 多环境：本地开发环境、线上环境
- 多工具：Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole、etc
- 多技巧：Console、BreakPoint、sourceMap、代理等
02. Chrome DevTools
- Elements
- Console
- Source
- Performance
- Network
动态修改元素和样式
- 点击.cls开启动态修改元素的class
- 输入字符串可以动态的给元素添加类名
- 勾选/取消类名可以动态的查看类名生效效果
- 点击具体的样式值（字号、颜色、宽度高度等）可以进行编辑，浏览器内容区域实时预览
- Computed下点击样式里的箭头可以跳转到styles面板中的css规则
- 可以用以下两种方式强制激活伪类：
- 选中具有伪类的元素，点击：hov
- DOM树右键菜单，选择Force State
Console
- console.log
- console.warn
- console.error
- console.debug
- console.info
- console.table：具象化的展示JSON和数组数据
- console.dir：通过类似文件树的方式展现对象的属性
- 占位符：给日志添加样式，可以突出重要的信息
- %s: 字符串占位符
- %o: 对象占位符
- %c: 样式占位符
- %d: 数字占位符
Sorce Tab
- 区域一：页面资源文件目录树
- 区域二：代码预览区域
- 区域三：Debug工具栏
- 暂停（继续）
- 单步跳过
- 进入函数
- 单步执行
- 激活（关闭）所有断点
- 代码执行异常处自动
- 区域四：断点调试器
Scope与Call Stack
- 展开Scope可以查看作用域列表（包含闭包）
- 展开Call Stack可以查看当前javaScript代码的调用栈
压缩后的代码如何调试？
前端代码天生具有“开源”属性，出于安全考虑，上线之前JavaScript代码通常会被压缩，压缩后的代码只有一行，变量使用’a'、‘b'等替换，整体变得不可阅读。
Source Map
mappings字段储存了源文件和source map的映射
- 英文，表示源码及压缩代码的位置关联
- 逗号，分割一行代码中的内容
- 分号，代表换行
Performance
- 区域一：控制面板
- 区域二：概览面板：
- FPS：每秒帧数
- CPU：处理各个任务花费的时间
- NET：各个请求花费时间
- 区域三：线程面板：
- Frames：帧线程
- Main：主线程，负责执行Javascript，解析HTML/CSS，完成绘制
- Raster：Raster线程，负责完成某个layer或者某些块的绘制
- 区域四：统计面板
Performance运用示例
页面卡顿 -> 查看FPS指标 -> 寻找性能瓶颈 -> 优化代码
Lighthouse
- Largest Contentful Paint (LCP)：最大内容绘制，测量加载性能。为了提供良好的用户体验，LCP应在页面首次开始加载后的2.5秒内发生。
- First Input Delay(FID）：首次输入延迟，测量交互性。为了提供更好的用户体验，页面的 FID应为100毫秒或更短。
- Cumulative Lavout Shift (CLS)：累积布局偏移，测量视觉稳定生。为了提供良好的用户体验，页面的CLS应保持在0.1或更少。
03. 个人总结
通过这节课，更初步地了解了如何在PC端进行debug，老师举了很多例子，第一次体会到原来一个网页或者动画的背后还有这么多不断的调试和努力，精益求精，好厉害！
