这是我参与「第五届青训营 」伴学笔记创作活动的第 7 天.

BUG和DEBUG

动态修改元素和样式

• ·点击.cls开启动态修改元素的 class·
• 输入字符串可以动态的给元素添加类名
• 勾选/取消类名可以动态的查看类名生效效果
• 点击具体的样式值(字号、颜色、宽度高度等)可以进行编辑，浏览器内容区域实时预览
• Computed下点击样式里的箭头可以跳转到styles面板中的cSs规则

Console

• console.log
• console.warn
• console.error
• console.info
• console.table
• console.dir
• 占位符

Break Point和watch

-预览区域的行号可以设置断点

• 执行到断点处时代码暂停执行
• 展开Breakpoints列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
• 暂停状态下，鼠标hover 变量可以查看变量的值
• 在调试器Watch右侧点击+可以添加对变量的监控，查看该变量的值

Scope和Call Stack

• 展开Scope可以查看作用域列表
• 展开Call Stack可以查看当前JS代码的调用栈

压缩后的代码调试-Source Map

前端代码天生具有开源”属性，出于安全考虑，上线之前JavaScript代码通常会被压缩，压缩后的代码只有一行，变量使用 a'、'b'等替换，整体变得不可阅读。那么压缩后的代码如何调试呢?
mappings字段存储了源文件和Souroe Map 的映射

• 英文，表示源码及压缩代码的位置关联。
• 逗号，分隔一行代码中的内容。
• 分号，代表换行。

Performance

• FPS:每秒帧数
• CPU:处理各个任务花费的时间
• NET:各个请求花费时间
• Frames :帧线程
• Main :主线程，负责执行Javascript,解析HTMLCSS,完成绘制
• Raster : Raster线程，负责完成某个layer或者某些块(tile)的绘制。

Lighthouse

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