这是我参与「第五届青训营 」笔记创作活动的第11天
前端Debug特点
- 多平台：浏览器、Hybrid、NodeJS、小程序、桌面应用
- 多环境：本地开发环境、线上环境
- 多工具：Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole
- 多技巧：Console、BreakPoint（断点）、sourceMap、代理
浏览器devTools
Elements（元素）
动态修改元素样式的方式
- 点击 .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：通过类似以文件树的方式展示对象的属性
- 占位符：给日志添加样式，可以突出重要的信息：%s:字符串占位符；%o:对象占位符，%c:样式占位符；%d:数字占位符
Sorce Tab（源代码）
-
页面资源文件目录树
-
代码预览区域
-
Debug 工具栏
- 暂停（继续）
- 单步跳过
- 进入函数
- 跳出函数
- 单步执行
- 激活（关闭）所有断点
- 代码执行异常处自动
-
断点调试器
-
展开 Scope 可以查看作用域列表〈包含闭包)
-
展开 Call Stack 可以查看当前 javaScript 代码的调用栈
断点调试器 BreakPoint
- 使用关键字debugger或代码预览区域的行号可以设置断点
- 执行到断点处时代码暂停执行展开Breakpoints列表可以查看断点列表，勾选/取消可以激活禁用对应断点
- 暂停状态下，鼠标hover变量可以查看变量的值
- 在调试器Watch右侧点击+可以添加对变量的监控，查看该变量的值
压缩代码调试（sorce map）
前端代码天生具有“开源"属性，出于安全考虑，上线之前 JavaScript 代码通常会被压缩，压缩后的代码只有一行，变量使用'a'、b'等替换，整体变得不可阅读。那么压缩后的代码如何调试呢
mappings 字段存储了源文件和 Souroe Map 的映射
- 英文，表示源码及压缩代码的位置关联
- 逗号，分隔一行代码中的内容
- 分号，代表换行
Network（网络）
- 控制面板
- 过滤面板
- 概览区域
- Request Table 面板
- 总结面板
- 请求详情面板
Application（应用）
Application 面板展示与本地存储相关的信息
- Local Storage
- Session Storage
- IndexedDB
- Web SQL
- Cookie
点击左侧 Application 下的 Stroage 面板中的 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 (FD)： 首次输入延迟，测量交互性。为了提供良好的用户体验，页面的 FID 应为100毫秒或更短
- Cumulative Layout Shift (CLS)： 累积布局偏移，测量视觉稳定性。为了提供良好的用户体验，页面的CLS应保持在 0.1.或更少
总结
遇到bug的时候我首先会自己解决，但是也会遇到怎么也解决不了的问题，这时候就会需要调试，但是在调试的时候真的会无从下手，但是在看完这次课之后，对于浏览器调试，移动端调试还有各种工具都有个概念了，这样对于以后的开发是很有帮助的事情。
