这是我参加「第四届青训营 」笔记创作活动的第6天
1.Bug与DeBug
Bug的产生：
bug是臭虫小虫的意思，早期计算机的体积比较大，有些小虫子可能会钻入机器内部，造成计算机工作失灵，因此Bug慢慢从臭虫引申为程序错误。
DeBug调试：
特点：
1.多平台 2.多环境
3.多工具 4.多技巧
2.Chrome Devtools
动态修改元素和样式
·点击.cls开启动态修改元素的class
·输入字符串可以动态的给元素添加类名
· 勾选/取消类名可以动态的查看类名生效效果
·点击具体的样式值(字号、颜色、宽度高度等)可以进行编辑，浏览器内容区域实时预览
. Computed下点击样式里的箭头可以跳转到styles面板中的css规则
>>>>>>更改伪类：
·选中具有伪类的元素，点击:hov.
DOM树右键菜单，选择Force State
控制台
| 》》》》》》》 | 》》》》》》》》》》》》》 |
|---|---|
| console.log | 在控制台打印输出 |
| console.warn | 用于在控制台中写入警告消息。因此,打开控制台以显示输出(警告消息)。 |
| console.error | 会显示带有错误标志的错误信息提示，更加醒目， |
| console.debug | 输出“调试”级别的消息且仅仅控制台配置为显示调试输出时才显示该消息。 |
| console.info | 向 web 控制台输出一个通知信息 |
| console.table | 具像化的展示JSON和数组数据 |
| console.dir | 通过类似文件树的方式展示对象的属性 |
| 占位符 | %s:字符串占位符;%o:对象占位符;%c:样式占位符;%d:数字占位符 |
源代码区
- 区域1:页面资源文件目录树
- 区域2:代码预览区域
- 区域3:Debug工具栏从左到右依次为
- 暂停（继续)
- 单步跳过
- 进入函数
- 跳出函数
- 单步执行
- 激活（关闭)所有断点
- 代码执行异常处自动
- 区域4:断点调试器
网络区
- 区域1:控制面板
- 区域2∶过滤面板
- 区域3:概览区域
- 区域4: Request Table面板
- 区域5︰总结面板
- 区域6:请求详情面板
性能区
- 区域1:控制面板
- 区域2︰概览面板
- FPS:每秒帧数
- CPU:处理各个任务花费的时间
- NET:各个请求花费时间
- 区域3:线程面板
- Frames:帧线程
- Main:主线程，负责执行Javascript,解析HTMLCSS,完成绘会制
- Raster: Raster线程，负责完成某个layer或者某些块(tile)的绘制。
- 区域4:统计面板
Lighthouse区
核心web指标：
- Largest Contentful Paint (LCP):最大内容绘制，测量加载性能。为了提供良好的用户体验，LCP应在页面首次开始加载后的2.5秒内发生。
- First Input Delay (FID):首次输入延迟，测量交互性。为了提供良好的用户体验，页面的FID应为100毫秒或更短。
- cumulative Layout Shift (CLS):累积布局偏移，测量视觉隐定性。为了提供良好的用户体验，页面的CLS应保持在0.1.或更少。
