这是我参与「第五届青训营 」伴学笔记创作活动的第10天
一、本堂课重点内容：
- Elements
- Console
- Source
- Performance
- Network
二、详细知识点介绍：
前端Debug的特点
- 多平台
- 浏览器、Hybrid、NodeJS、小程序、桌面应用等
- 多环境
- 本地开发环境、线上环境
- 多工具
- Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole ...
- 多技巧
- Console、Breakpoint、sourceMap、代理等
Chrome DevTools
Console模块
常用调试代码：
- console.log：输出
- console.warn：向web输出的警告消息
- console.error：报错，最烦的玩意，有时候不出也烦
- console.debug：当控制台配置为显示调试输出时，该消息会显示给用户。
- console.table：展示JSON和数组数据
- console.dir：展示对象属性，方便找到我们需要的属性及属性值
Source模块
- 使用关键字debugger或代码预览区域的行号可以设置断点
- 执行到断点处时代码暂停执行
- 展开 Breakpoints 列表可以查看断点列表，勾选／取消可以激活／禁用对应断点
- 暂停状态下，鼠标 hover可以查看变量的值变量
- 在调试器 Watch右侧点击＋可以添加对变量的监控，查看该变量的值
- 展开Scope 可以查看作用域列表（包含闭包）
- 展开 Call Stack 可以查看当前javaScript 代码的调用栈
Application模块
Application 面板展示与本地存储相关的信息
- Local Storage
- Session Storage
- IndexedDB
- Web SQL
- Cookie
移动端H5调试
iOS
- 使用Lightning 数据线将 iPhone与Mac 相连
- iPhone 开启Web 检查器（设置－＞Safari->高级－＞开启 Web 检查器）
- iPhone 使用 Safari 浏览器打开要调试的页面
- Mac 打开 Safari 浏览器调试（菜单栏－＞开发－＞iPhone 设备名－＞选择调试页面）
- 在弹出的 Safari Developer Tools 中调试
Android
- 使用USB数据线将手机与电脑相连
- 手机进入开发者模式，勾选USB调试，并允许调试
- 电脑打开 Chrome 浏览器，在地址栏输入：chrome:/／inspect/#devices 并勾选 Discover USB devices 选项
- 手机允许远程调试，并访问调试页面
- 电脑点击 inspect 按钮
- 进入调试界面
