这是我参与「第五届青训营 」伴学笔记创作活动的第14天。
一、本堂课重点内容
- Bug与Debug
- Chrome DevTools
- PC端调试
二、详细知识点介绍
前端Debug
特点：
- 多平台
- 浏览器 Hybrid NodeJs 小程序 桌面应用
- 多环境
- 本地 线上
- 多工具
- Chrome DevTools、Charles Spy-Debugger Whistle vConsole
- 多技巧
- console breakpoint sourceMap 代理
Chrome DevTools
Elements：网页的元素和样式
Styles内，.cls可以动态调整元素的类名进而调整元素的样式
在Elements内选择元素，右键选择Force state，可以设置元素强制为某个伪类状态，然后可以在Styles中调整伪类；也可以在Styles中点击.hov勾选相应的伪类；也可以在Computed中通过Filter搜索想要的样式。
Console：控制台，展示日志，
console .log白，字符串和数字的输出颜色不同 warn黄 error红 debug蓝 info白，console.log('%s %o,%c%s',{name:'tom'},'{color:red}','welcome')可以控制打印的样式。
%s字符串占位符 %o对象占位符 %c样式占位符 %d数字占位符
console.table 具象化的展示JSON和数组数据
console.dir 通过类似文件树的方式展示对象属性，参数为DOM元素的时候可以很方便的展示DOM元素的属性，而console.log不行。
console.time()计时器开始，console.timeEnd()计时器结束，执行console.timeEnd()会打印计时时间。
Source：显示源代码
1、2区域显示代码，3、4区域调试代码。
在源代码中需要调试的地方加上代码
debugger;，可在调试器中暂停。
Scope是作用域界面，可以包含闭包。
Call Stack是调用栈界面。
XHR/fetch Breakpoints是所有网络请求断点，可以勾选所有网络请求断点，或指定网络请求断点。
DOM Breakpoints：HTML中元素变化的断点。
调试压缩后的代码
webpack、UglifuJS、terser
需要结合sourceMap
- 英文，表示源码及压缩代码的位置关联
- 逗号，表示分隔一行代码段中的内容
- 分号，表示换行
上线时不包含sourceMap，sourceMap存于监控程序中，以应对上线后的bug调试。
Network：网络
页面加载的网络请求
Waterfall瀑布图对应着串行和并行
通过No throttling按钮调整网络环境，可以调整为弱网环境，用于调试弱网适配
Application：浏览器存储相关
可以查看当前浏览器存储
localStorage、Session storage、cookie、web SQL
Performance：网页性能相关
发现网站的性能瓶颈并优化。
可以调整CPU和网络的性能，模拟较差网络和硬件条件下网页的渲染。
页面卡顿时，查看FPS指标，寻找性能瓶颈，优化代码
在more tools的rendering标签，勾选Frame rendering stats可以显示帧速率，正常帧速率约为60
Lighthouse
自动审计并分析页面，进行打分，每一个指标有对应的计算方式
衡量Web站点性能的核心指标：
- Largest Contentful Paint（LCP）：最大内容绘制，测量加载性能。为了提供良好的用户体验，LCP应在页面首次开始加载后的2.5秒内发生。
- First Input Delay（FID）：首次输入延迟，测量交互性。为了提供良好的用户体验，页面的FID应为100毫秒或更短。
- Cumulative Layout Shift（CLS）：累积布局偏移，测量视觉稳定性。为了提供良好的用户体验，页面的CLS应保持在0.1或更少。
如果性能不符合预期，Lighthouse提供了一些建议或优化方式。
三、课后个人总结
本节课学习了PC端前端调试的方法，主要是借助Chrome Devtools进行调试。Chrome Devtools提供了丰富的调试功能，包括页面组件、控制台、源代码、网络和性能等。本节课介绍了Chrome Devtools常见的调试面板和调试方法，并结合例子介绍了如何在线修改元素样式，查看日志，调试代码以及分析网络请求和性能等。Devtools提供的功能远不止这些，需要之后继续学习研究。
四、参考链接
使用Chrome DevTools的F12进行前端页面性能测试（手把手教你，非常全，建议收藏）_f12lighthouse_入坑玩家的博客-CSDN博客
