这是我参与「第四届青训营 」笔记创作活动的第13天
前端调试知识PC端
Bug 与 Debug
前端Debug特点
多平台：浏览器、NodeJs、小程序、桌面应用等
多环境：本地开发环境、线上环境
多工具：Chrome devTools | Charles | Spy-Debugger | Whistle
多技巧 ：Console | BreakPoint |sourceMap ｜代理
Chrome devTools
在Chrome 浏览器中点击F12 或者右键再点击检查，可以打开调试工具，开发者可以在调试工具中进行调试。
打开后如下图所示：
元素
可以在元素中右边的样式栏直接对样式进行修改：
控制台
控制台左侧是日志的一些分类。
不同命令：
- console.log -- 打印一条日志
- console.warn
- console.error
- console.debug
- console.info
- console.table ：可以具像化的展示
JSON数据和数组数据 - console.dir ：类似文件树的形式方式展示对象的属性
- console.time
源代码
区域1 ：项目资源文件目录树
区域2 ：代码预览区域
区域3 ：Debug工具栏，从左到右依次为
- 暂停（继续）
- 单步跳过
- 进入函数
- 跳出函数
- 单步执行
- 激活（关闭）所有断点
- 代码执行异常处自动
区域4：断点调试器
断点调试
Scope 展开可以查看作用域列表
Call Stack 展开可以查看当前JS代码的调用栈
压缩代码调试
压缩后的代码非常混乱，这时候可以使用sourceMap 进行调试
mappings 字段存储了源文件和 Source Map 的映射，这样子点击弹出的错误后就可以直接显示源码的错误地方
- 英文：表示源码及压缩代码的位置关联
- 逗号：分隔一行代码中的内容
- 分号：代表换行
网络
区域1 ：控制面板
区域2 ：过滤面板
区域3 ：概览区域
区域4 ：request Table面板
区域4下方那一块：总结面板
区域5 ：请求详情面板
应用
该面板展示与本地存储相关的信息
- Local Storage
- Session Storage
- IndexedDB
- Web SQL
- Cookie
点击左侧Application下的Clear Site Data 可以清除网页的本地缓存数据
性能
区域1 ：控制面板
区域2 ：概览面板
- FPS：每秒帧数
- CPU：处理各个任务花费的时间
- NET：各个请求花费时间
区域3 ：线程面板
- Frames：帧线程
- Main：主线程，负责执行JS，解析HTML/CSS，完成绘制
- Raster：Raster线程，负责完成某个layer或者某些块（tile）的绘制
区域4 ：统计面板
Lighthouse
核心Web指标：
- LCP：最大内容绘制，测量加载性能，为了提供良好的用户体验，LCP应在页面首次开始加载后的2.5秒内发生
- FID：首次输入延迟，测量交互性。为了提供良好的体验，页面的FID应为100ms或更短
- CLS：累计布局偏移，测量视觉稳定性，为了提供良好的体验，CLS应保持在0.1或更少
\
