前端开发调试知识 | 青训营笔记

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

Bug

前端bug的特点：

1. 多平台：浏览器，Hybrid，NodeJs，小程序，桌面应用
2. 多环境：本地开发环境、线上环境
3. 多工具：Chrome devTools，Charles，Spy-Debugger
4. 多技巧：Consle，BreakPoint，ScoureMap

Chrome DevTools (pc浏览器)

打印控制台Console

动态修改元素和样式
点击.cls开启动态修改元素的class

可以输入字符串动态给元素添加类名；勾选/取消类名可以动态的查看类名生效效果

Source Tab
左侧：页面资源文件目录树
中间：代码预览区域
右侧：Debug工具栏->暂停，单步跳过，进入函数，跳出函数，单步执行，激活所有断点，代码执行异常处自动；
debug的使用：
1. 使用关键字debugger或者选择行号可以进行断点调试选择

2. 执行到断点处的代码会停止 3. 展开breakpoints列表可以查看断点列表。

4. 暂停状态下，鼠标hover变量可以查看变量的
5. 在调试器Watch右侧点击+可以添加对变量的监控，查看该变量的值

• Network工具

可以在request tabel区域看到发起的所有请求信息，点击可以查看请求详情，可以看到请求头，负载等信息。

Performance面板
FPS: 每秒的帧数
CPU: 处理各个任务花费的事件
NET: 各个请求花费的事件
Frames: 帧线程
Main: 主线程，负责执行JavaScript，解析HMTL/CSS，完成绘制
Raster: Raster线程，负责完成某个layer或者某些块的绘制

Lighthouse

核心web指标

Largest Contentful Paint(LCP): 最大内容绘制，测量加载性能，为了提供良好的用户体验，LCP应在页面首次开始加载后2.5s内发生
First Input Delay(FID): 首次输入延迟，测量交互性。为了提供良好的用户体验，页面的FID应为100ms或更短
Cumulative Layout Shift(CLS): 累积布局偏移，测量视觉稳定性。为了提供良好的用户体验，CLS应保持在0.1或更少

压缩后的代码如何调试

Source Map：映射源码
解决方案：项目打包时，加上sourceMap，上线时，将SourceMap文件发布到监控平台，上线时不带SourceMap文件