这是我参与「第四届青训营 」笔记创作活动的第8天
Bug 与 Debug
前端 Debug 的特点
前端Debug的特点：
- 多平台 ：浏览器，Hybrid,Node.js,微信小程序，桌面应用等
- 多环境 ：本地开发环境，线上环境等
- 多工具 ：Chrome devToos,Spy-Debugger,Whistle,vConsole，Charles等
- 多技巧 ：Console,BreakPoint,sourceMap，代理等
Chrome DevTools
动态修改元素和样式：
可以直接在网页上进行动态修改，可以通过勾选，取消等等修改具体样式，而且可以实时浏览
输入字符串可以动态的给元素添加类名，点击.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数字
Sorce Tab
-
页面资源文件目录树
-
代码预览区域
-
Debug 工具栏
- 暂停（继续）
- 单步跳过
- 进入函数
- 跳出函数
- 单步执行
- 激活（关闭）所有断点
- 代码执行异常处自动
-
断点调试器
-
展开 Scope 可以查看作用域列表〈包含闭包)
-
展开 Call Stack 可以查看当前 javaScript 代码的调用栈
Source Map
mappings字段存储了源文件以及Source Map的映射
- 英文，表示源码以及压缩代码的位置关联
- 逗号，表示分割一行代码中的内容
- 分号，代表换行
压缩后的代码如何调试
前端代码天生具有“开源"属性，出于安全考虑，上线之前 JavaScript 代码通常会被压缩，压缩后的代码只有一行，变量使用'a'、b'等替换，整体变得不可阅读。那么压缩后的代码如何调试呢?
Source Map：
mappings 字段存储了源文件和 Souroe Map 的映射
- 英文，表示源码及压缩代码的位置关联
- 逗号，分隔一行代码中的内容
- 分号，代表换行
Network
Application
Application 面板展示与本地存储相关的信息
Performance
Performance运用示例：
Lighthouse
核心 Web指标
- Largest Contentful Paint (LCP)∶最大内容绘制，测量加载性能。为了提供良好的用户体验，LCP 应在页面首次开始加载后的2.5秒内发生
- First Input Delay (FD)：首次输入延迟，测量交互性。为了提供良好的用户体验，页面的 FID 应为100毫秒或更短
- Cumulative Layout Shift (CLS)：累积布局偏移，测量视觉稳定性。为了提供良好的用户体验，页面的CLS应保持在0.1.或更少
移动端 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 按钮
- 进入调试界面
VConsole
使用代理工具调试
原理：
- 电脑作为代理服务器
- 手机通过 HTTP 代理连接到电脑
- 手机上的请求都经过代理服务器
默认情况下，Charles无法抓取到HTTPS的请求，需要安装证书。
常用代理工具：Charles、Fiddler、spy-debugger、Whistle
