浅学前端基础开发调试知识|青训营笔记
这是我参与「第四届青训营 」笔记创作活动的的第7天
Bug与Debug
bug的产生
前端Debug的特点
- 多平台 (浏览器、Hybrid、Noodels、小程序、桌面应用...)
- 多环境 （本地开发环境、线上开发环境）
- 多工具 （Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole...）
- 多技巧 （Console、BreakPoint、sourceMap、代理...）
Chrome DevTools
动态修改元素和样式
- 点击.cls开启动态修改元素的class
- 输入字符串可以动态的给元素添加类名
- 勾选/取消类名可以动态的查看类名生效效果
- 点击具体的样式值（字号、颜色、宽度、高度等）可以进行编辑，浏览器内容区域实时预览
- Computed下点击样式里的箭头可以跳转到styles面板中的css规则
可以用以下两种方式强制激活伪类
- 选中具有伪类的元素，点击：hov
- DOM树右键菜单，选择Force State
Console
左侧可以选择等级，对日志进行分类查看
- console.log
- console.warn
- console.error
- console.debug
- console.info
- console.table （具象化的展示JSON和数组元素）
- console.dir （通过类似文件树的方式展示对象的属性）
- 占位符 （给日志添加样式，可以突出重要信息）
Sorce Tab
区域划分：
- 页面资源文件目录树
- 代码预览区域
- Debug工具栏，从左到右依次为
- 暂停（继续）
- 单步跳过
- 进入函数
- 跳出函数
- 单步执行
- 激活（关闭）所有断点
- 代码执行异常出自动
- 断点调试器
NetWork
区域划分：
- 控制面板
- 过滤面板
- 概览区域
- Request Table面板
- 总结面板
- 请求详情面板
Application
Application面板展示与本地存储相关的信息
- Local Storage
- Session Storage
- IndexedDB
- Web SQL
- Cookie
点击左侧Application下的Storage面板中的Clear Site Data可以清楚网页的本地存储数据
Performance
区域划分：
- 控制面板
- 概览面板
- FPS：每秒帧数
- CPU：处理各个任务花费的时间
- NET：各个请求花费的时间
- 线程面板
- Frames：帧线程
- Main：主线程，负责执行Javascript，解析HTML/CSS，完成绘制
- Raster：Raster线程，负责完成某个layer或者某些块（tile）的绘制
- 统计面板
Lighthouse
核心Web指标
- Largest Contentful Paint（LCP）：最大内容绘制，测量加载性能。为了提供良好的用户体验，LCP应在页面首次开始加载后的2.5秒内发生
- First Input Delay（FID）：首次输入延迟，测量交互性。为了提供良好的用户体验，页面的FID应为100毫秒或更短。
- Cumulative Layout Shift（CLS）：积累布局偏移，测量视觉稳定性。为了提供良好的用户体验，页面的CLS应保持在0.1或更少。
移动端HS调试
真机调试
| IOS | Android |
|---|---|
| 1.使用Lighting数据线将IPhone与MAC相连 | 1.使用USB数据线将手机与电脑相连 |
| 2.iPhone开启Web检查器（设置->Safari->高级->开启web检查器） | 2.手机进入开发者模式，勾选USB调试，并允许调试 |
| 3.iPhone使用Safari浏览器打开要调试的页面 | 3.电脑打开Chrome浏览器，在地址栏输入：chrome://inspect/#devices 并勾选Discover USB devices选项 |
| 4.Mac打开Safari卢兰其调试（菜单栏->开发->iPhone设备名->选择调试页面） | 4.手机允许远程调试，并访问调试页面 |
| 5.在弹出的Safari Developer Tools中调试 | 5.电脑点击inspect按钮 |
| 6.进入调试页面 | |
| 没有iPhone设备可以在Mac App Store安装Xcode使用其内置的模拟器 | 直接使用手机扫码观看，体验更佳 |
VConsole
- 日志（Logs）：console.log|info|error|..
- 网络（Network）：XMLHttpRequest，Fetch，sendBeacon
- 节点（Element）：HTML节点树
- 储存（Storage）：Cookies，LocalStorage，SeeionStorage
- 手动执行JS命令行
- 自定义插件
使用代理工具调试
原理：
- 电脑作为代理服务器
- 手机上通过HTTP代理连接到电脑
- 手机上的请求都经过代理服务商
个人总结
本次课程了解了许多关于前端开发调试的知识点，但是理论还需自己付出实践，又是收获满满的一天。
