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

前端Debug的特点

多平台（浏览器，Hybrid，NodeJs，小程序，桌面应用等）
多环境（本地开发环境，线上环境）
多工具（Chrome devTools）
多技巧（代理，Conscle）

Chrome devTools

动态修改元素和样式

强制激活伪类：选中点击hov/DOM树右键选择 Force State

Scope 与 Call Stack

展开Scope可以查看作用域列表（包含闭包）
展开Call Stack可以查看当前javaScript代码的调用栏

Source Map

mappings 字段储存了源文件和 Source Map 的映射
英文表示源代码及压缩代码的位置关联
逗号，分隔一行代码中的内容
分号，代表换行

Network

区域1:控制面板
区域2:过滤面板
区域3:概览区域
区域4:Request Table 面板
区域5:总结面板
区域6:请求详情面板

Application

 Application面板展示与本地存储相关的信息
 Local Storage
  Session Storage

Performance

 概览面板：
 FPS：每秒帧数
 CPU：处理各个任务花费的时间
 NET：各个请求花费时间
 线程面板：
 Frames：帧线程
 Main：主线程，负责执行Javascript，解析HTML/CSS完成绘制
 Raster：负责完成某个layer或者某些块的绘制

移动端 H5 调试

 真机调试（iOS & android）
 VConsole
 使用代理工具调试（原理：电脑作为代理服务器，手机通过HTTP代理连接到电脑，手机上的请求都经过代理服务器）

总结： 今天的课让我了解了bug由来的历史，这也正是我最近希望去了解的问题。老师讲了前端Debug的特点，我觉得这几方面拓宽了我日常Debug的思路。接下来非常详细的讲了Chrome devTools，这部分的内容我之前只是大概的听说过，没有很详细接触运用过，老师的讲解让我对前端的知识掌握的更全面了。还有最后移动端的调试，我觉得这部分会更好理解，因为现在日常手机的使用频率很高。