这是我参与「第四届青训营」笔记创作活动的的第14天

1 Bug与Debug

前端Debug的特点
1. 多平台
  - 浏览器、Hybrid、NodeJS、小程序、桌面应用等
2. 多环境
  - 本地开发环境、线上环境
3. 多工具
  - Chrome DevTools、Charles、Spy-Debugger、Whistle、vConsole...
4. 多技巧
  - Console、BreakPoint、sourceMap、代理等

2 Chrome DevTools

点击.cls开启动态修改元素的class
- 输入字符串即可添加类名（也可提前在文件中写好这样动态添加）
- 勾选或取消类名可以动态查看类名生效的效果
- 点击具体样式值可以手动修改
- Computed下filter搜索框，点击样式里的箭头可以跳转到styles面板中的css规则
- 有两种方式激活伪类
  - 选中具有伪类的元素，右键Force State，点击:hov等伪类
  - 选中具有伪类的元素，在右边的.cls旁有:hov也可操作
- 实用小技巧
  - 截屏：选中body标签，右键选择“截取节点屏幕截图”即可把body的渲染效果截图
Console控制台
- console.log、console.warn、console.error、console.debug、console.info
- console.table：具象化展示JSON数据和数组数据。当使用console.log打印对象或数组时，会折叠打印出所有内容，观看不方便
- console.dir：类似文件树的方式展示对象的属性。当使用console.log打印时，会完整的输出当前的html代码，而不是属性
- 占位符：给日志添加样式，可以突出重要的信息
  - %s：字符串占位符
  - %o：对象占位符
  - %c：样式占位符
  - %d：数字占位符
Source Tab
- 断点调试代码
  - 在代码中添加语句debugger并且配合在代码中添加console.log可以调试代码
  - 可以直接在sources代码区域直接点击左侧的行号添加断点
- 调试代码时，可以在sources中直接把鼠标放在变量上，会显示当前变量的数值；在右侧的Watch中也会显示代码中变量的值
- Watch下面的Breakpoints中显示设置的断点，可以点击取消
- 闭包和执行栈案例
- XHR/fetch breakpoints中分别为勾选所有请求和部分想要断点请求：Any XHR or fetch 、URL contains {PH1}
- DOM breakpoints：当DOM中元素发生变化时，添加断点
- 压缩后的代码如何调试
  - 前端代码天生具有“开源”属性，出于安全考虑，上线之前JavaScript代码通常会被压缩，压缩后的代码只有一行，变量使用'a'、'b'替换，整体变得不可阅读
  - source map 一般将带有source map的代码上传到监控平台，然后将删掉source map的代码上传
Network
- Fetch/XHR：接口请求，可以选中一个请求在右侧查看响应时间
- No throttling：模拟弱网环境运行代码
- 当要确定代码问题是出在后端还是前端，可以点击Fetch/XHR中的接口请求，在右侧的Preview和Response中查看返回值确定；左侧的headers是所有请求信息
Application
Performance
Lighthouse
- 由于使用Performance面板查看网页性能比较复杂，故使用Lighthouse查看