这是我参与「第五届青训营 」伴学笔记创作活动的第 10 天。
一、前端Debug特点：
1.多平台:浏览器、Hybrid、NodeJs、小程序、桌面应用等.
2.多环境:本地开发环境、线上环境
3.多工具
4.多技巧
二、动态修改样式元素步骤：
1. 点击.cls开启动态修改元素的class
2. 输入字符串可以动态的给元素添加类名
3. 勾选/取消类名可以动态的查看类名生效效果·点击具体的样式值（字号、颜色、宽度高度等)可以进行编辑，浏览器内容区域实时预览
4. Computed下点击样式里的箭头可以跳转到styles面板中的css规则
三、Break Point sWatch：
1. 使用关键字debugger 或代码预览区域的行号可以设置断点
2. 执行到断点处时代码暂停执行
3. 展开Breakpoints列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
4. 暂停状态下，鼠标hover 变量可以查看变量的值
5. 在调试器Watch右侧点击＋可以添加对变量的监控，查看该变量的值
四、Source Map
mappings字段存储了源文件和Source Map的映射
英文，表示源码及压缩代码的位置关联·逗号，分隔一行代码中的内容。
分号，代表换行。
五、Lighthouse
1.Largest Contentful Paint (LCP):最大内容绘制，测量加载性能。为了提供良好的用户体验，LCP应在页面首次开始加载后的.5秒内发生。
2.First Input Delay (FID):首次输入延迟，测量交互性。为了提供良好的用户体验，页面的FID应为1oo毫秒或更短。
3.Cumulative Laycut Shift (CLS):︰累积布局偏移，测量视觉稳定性。为了提供良好的用户体验，页面的CLs应保持在o.1.或更少。
