这是我参与「第四届青训营 」笔记创作活动的的第3天，本篇笔记是上课提到的内容知识点和总结
Bug与Debug
前端Debug的特点：
- 多平台 ：浏览器，Hybrid,Node.js,微信小程序，桌面应用等
- 多环境 ：本地开发环境，线上环境等
- 多工具 ：Chrome devToos,Spy-Debugger,Whistle,vConsole，Charles等
- 多技巧 ：Console,BreakPoint,sourceMap，代理等
Chrome Devtools
1. 动态修改元素和样式：
可以直接在网页上进行动态修改，可以通过勾选，取消等等修改具体样式，而且可以实时浏览
输入字符串可以动态的给元素添加类名，点击.cls开启动态修改元素的class
Computed下点击样式里的箭头可以跳转到styles面板中的css规则
2种方式强制激活伪类：
- 选中具有伪类的元素，点击：hov
- DOM树右键菜单，选Force State
2.Console:
- console.log
- console.warn
- console.error
- console.debug
- console.info
- console.table 展示JSON和数组数据
- console.dir 通过类似文件树的方式展示对象的属性
- 占位符 给日志添加样式，可以突出重要的信息
%s字符串 %o对象 %c 样式 %d数字
3.Sorce Tab
Scope与Call Stack
- 展开Scope可以查看作用域列表，包括闭包
- 展开Call Stack可以查看当前JavaScript代码的调用栈
代码压缩后调试 出于安全考虑，上线前JavaScript代码通常会被压缩，变量用ab字母替换.用source map进行压缩映射
Source Map
mappings字段存储了源文件以及Source Map的映射
- 英文，表示源码以及压缩代码的位置关联
- 逗号，表示分割一行代码中的内容
- 分号，代表换行
application，performance：
Lighthouse 显示一些性能指标
移动端H5的调试
真机调试 直接用数据线相连调试
VConsole
Charles
线上即时修改Overrides
