这是我参与「第四届青训营 」笔记创作活动的第9天
一些题外话：其实一直知道在编程过程中调试是极其重要的一环，但对于前端开发相关的调试却一直没有深入了解，借青训营刚好补上这一环。也正好，大项目选择的是监控系统，所以再整理复习一下~
前端Debug特点：
多平台
多环境
多工具
多技巧
Web 应用使用 Chrome devTools 调试
- 动态修改元素和样式
点击.cls开启动态调整元素与样式，可以通过勾选/取消勾选类名查看类的效果，可以对具体的样式值进行编辑查看效果。Computed下点击样式里的箭头可以跳转到styles面板中的CSS规则。
可以用以下2种方式强制激活伪类
- 选中具有伪类的元素，点击: hov
- DOM树右键菜单，选择Force State
- 控制台
在左侧可以选择等级，对日志信息分类查看
console .log
console .warn
console . error
console .debug
console .info
● console. table
具像化的展示JSON和数组数据
● console .dir
通过类似文件树的方式展示对象的属性
● 占位符
给日志添加样式，可以突出重要的信息
%s:字符串占位符; %o:对象占位符; %c: 样式占位符; %d:数字占位符
3. Sorce Tab
5. BreakPoint 与 Watch
- 使用关键字debugger或代码预览区域的行号可以设置断点
- 执行到断点处时代码暂停执行
- 展开Breakpoints列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
- 暂停状态下，鼠标hover变量可以查看变量的值
- 在调试器Watch右侧点击+可以添加对变量的监控，查看该变量的值
- Scope 与 Call Stack
展开Scope可以查看作用域列表(包含闭包)
展开Call Stack可以查看当前javaScript代码的调用栈 压缩后代码的调试
因为前端代码自带“开源”属性，出于安全考虑，相关的js代码通常会被压缩，那么压缩后的代码又是如何调试呢？
- Source Map
mappings字段存储了源文件和Source Map的映射
● 英文，表示源码及压缩代码的位置关联
● 逗号，分隔一行代码中的内容。
● 分号，代表换行。
和监控系统相关的
- NetWork
- Performance
graph TD
页面卡顿 --> 查看FPS指标 --> 寻找性能瓶颈 --> 优化代码
3. LightHouse
核心Web指标
Largest Contentful Paint (LCP) :最大内容绘制，测量加载性能。为了提供良好的用户体验,LCP应在页面首次开始加载后的2.5秒内发生。
First Input Delay (FID):首次输入延迟，测量交互性。为了提供良好的用户体验，页面的FID应为100毫秒或更短。
Cumulative Layout Shift (CLS):累积布局偏移，测量视觉稳定性。为了提供良好的用户体验，页面的CLS应保持在0.1.或更少。
