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

PC端调试

bug-虫子 debug-杀虫

前端debug特点

• 1.多平台 -浏览器、hybrid、nodejs、小程序
• 2.多环境
• 3.多工具
• 4.多技巧

chrom检查调试

Element-修改元素和样式

• 点击.cls可以动态修改class 新类名

• 伪类、不同状态下才有的样式-右键Force-state强制状态。 或者:hov修改

• 多个样式可以搜索Computed页面直接搜索，搜索到对应的直接点击箭头即可到达

• 调试页面的截屏：可以点击body鼠标右键截屏，网页即可截屏下来

Console控制台

展示日志页面

• 复制粘贴到该处回车运行

• 不同类型输出是不一样颜色、定位日记

• console.table-数据表格化展开

• console.dir-可以文件树打印出各种属性

source

展示项目源代码

• 区域一：页面资源文件目录树 区域2：展示代码 区域3：断点调试

• 加断点：debugger：关键字/加断点

• 可把鼠标移动到某一个值的位置，在断点调试时候。/区域3的位置也可以看到值以及所有断点。

• Scope：作用域，闭包。可以查看到各个

• Call stack：调用栈

压缩和混淆代码的调试用Source Map（上传到另一个平台）：需要使用一些工具

• 上线的时候删除source-map
• 可以做映射

Network

模拟网络环境-slow 3g...

• 和后端联调的时候检查请求列表找到对应接口，可以看到返回的结果值判断问题处

Application

浏览器存储相关

Performance

网页性能相关

• 区域四：可以发现各个部分瓶颈 点击record录制即可查看到网页性能。区域4可看到各个部分的耗时，每一帧效果在区域3。

• 解决思路：页面卡顿-查看FPS指标（查看每一帧、查看rendering情况正常刷新频率60，不会丢帧）-点击到main部分开始分析原因，看到红色区域表明有性能瓶颈，

Lighthouse

• 点击性能分析，即可得到性能情况-LCP、FID、CLS