这是我参与「第四届青训营 」笔记创作活动的第1天
一、bug and debug
1.1bug
bug是在应用程序投入生产之前发现的错误，是导致程序工作不佳、生产错误结果或崩溃的编程错误。bug在定义时，常常伴有人为观念的加持，在编程时，bug不可避免，但bug也可成为一个美丽的存在。
1.2debug
bug就好比是手术台上的病人，debug就是各型各色的手术工具、辅助仪器，而我们则是主刀医生，我们利用debug去将bug变成我们所期望的。debug的特点有多平台、多环境、多工具、多技巧。
二、Chrome DevTools
2.1Elements模块
一看便知
2.2Console模块
常用调试代码：
- console.log：输出
- console.warn：向web输出的警告消息
- console.error：报错，最烦的玩意，有时候不出也烦
- console.debug：当控制台配置为显示调试输出时，该消息会显示给用户。
- console.table：展示JSON和数组数据
- console.dir：展示对象属性，方便找到我们需要的属性及属性值
2.3Source模块
- 使用关键字debugger或代码预览区域的行号可以设置断点
- 执行到断点处时代码暂停执行
- 展开 Breakpoints 列表可以查看断点列表，勾选／取消可以激活／禁用对应断点
- 暂停状态下，鼠标 hover可以查看变量的值变量
- 在调试器 Watch右侧点击＋可以添加对变量的监控，查看该变量的值
- 展开Scope 可以查看作用域列表（包含闭包）
- 展开 Call Stack 可以查看当前javaScript 代码的调用栈
2.4Network模块
说来话长，来日方长再细说
2.5Application模块
Application 面板展示与本地存储相关的信息
- Local Storage
- Session Storage
- IndexedDB
- Web SQL
- Cookie
Ps：点击Application下的Stroage 面板中的 Clear Site Data可以清楚网页的本地存储数据
三、移动端H5调试
3.1iOS
- 使用Lightning 数据线将 iPhone与Mac 相连
- iPhone 开启Web 检查器（设置－＞Safari->高级－＞开启 Web 检查器）
- iPhone 使用 Safari 浏览器打开要调试的页面
- Mac 打开 Safari 浏览器调试（菜单栏－＞开发－＞iPhone 设备名－＞选择调试页面）
- 在弹出的 Safari Developer Tools 中调试
3.2Android
- 使用USB数据线将手机与电脑相连
- 手机进入开发者模式，勾选USB调试，并允许调试
- 电脑打开 Chrome 浏览器，在地址栏输入：chrome:/／inspect/#devices 并勾选 Discover USB devices 选项
- 手机允许远程调试，并访问调试页面
- 电脑点击 inspect 按钮
- 进入调试界面
四、总结
纸上得来终觉浅，绝知此事要躬行！
