这是我参与「第四届青训营 」笔记创作活动的第8天
这节青训营的课程老师讲解了一下有关前端的一些开发调试的知识，以下是我的一些课堂笔记。
Bug与Debug
- 前端Debug的特点：
- 多平台：浏览器，Hybrid,Node.js,微信小程序，桌面应用等
- 多环境：本地开发环境，线上环境等
- 多工具：Chrome devToos,Spy-Debugger,Whistle,vConsole，Charles等
- 多技巧：Console,BreakPoint,sourceMap，代理等
Console
- console有以下几大类：
- console.log
- console.warn
- console.error
- console.debug
- console.info
- console.table(具象化的展示JSON和数组数据)
- console.dir(通过类似文件树的方式展示对象的属性)
- 占位符（给日志添加样式，可以突出重要的信息，%s:字符串占位符，%o:对象占位符，%c:样式占位符，%d:数字占位符）
Scope与Call Stack
- 展开Scope可以查看作用域列表，包括闭包
- 展开Call Stack可以查看当前JavaScript代码的调用栈
代码压缩后调试
前端代码天生具有开源属性，出于安全考虑，上线之前，JavaScript代码通常会被压缩，压缩后的代码只有一行，变量用ab字母等替换，整体变得不可读。
Source Map
mappings字段存储了源文件以及Source Map的映射
- 英文，表示源码以及压缩代码的位置关联
- 逗号，表示分割一行代码中的内容
- 分号，代表换行
模拟网络速度来进行调试
在我们使用接口请求数据的时候，由于现在的网速很快，我们很难看清请求数据的过程，那么在我们调试器中的No throtting中可以模拟Slow 3G网络，来让开发者看清接口数据请求的过程，从而进行调试。
移动端H5的调试
- ios
- 使用Lightning数据线将iPhone与mac相连进行调试
- Android
- 使用usb数据线将手机与电脑连接进行调试
