玩转Chrome开发者工具2022(5/5)

13.网站优化

通过lighthouse面板整体的评估网站

images20221009171310.png

导航模式、时间跨度、快照，切换时执行按钮的描述已经表明了功能

"类别"区域表明会根据哪些维度进行评估，不同的模式可选项也会不同

单击不同的图标可以进行跳转

• First Contentful Paint ， 何时首次将内容绘制到屏幕上
• Time To Interactive 标记页面似乎准备好处理用户交互的时间点

可以清除当前报告，也可以选择新建一个，那么上一次的结果会被保存

"查看原始跟踪记录"就是跳转到"性能"面板

点击小图标可以切换

查看CSS的使用情况

Coverage 选项卡显示页面实际使用的 CSS。

打开命令菜单。输入"显示覆盖范围"，执行查看结果

点击文件会跳到"源代码"面板

使用css 概览

检测动画

打开动画面板

部分一

清除捕获的动画，以及控制动画的速度

部分二

切换动画组

部分三

播放、暂停动画

部分四

修改动画，拖动更改位置，会同步更改css

更改时间范围

渲染问题

里面有个有趣的功能是模拟"视力模糊"

效果如下

可访问性

注意"元素"面板的"可访问性"区块

勾选了“启用整页模式的无障碍功能树”时，点击下面的图标可更改dom树的展现形式

查看更改

打开面板

可以恢复、复制更改

查看问题

通过"问题"面板

媒体信息

通过"媒体"面板

安全问题

打开"安全"面板

14.借助Chrome开发者工具定位问题

线上问题排查

会有一些实在无法本地调试的场景，比如你想知道代码有没有发到线上

在源代码面板按下Ctrl+F来搜索一些不会被构建压缩的内容，比如中文"登录"

获取到文件的名字后，再切换到源代码面板，Ctrl+p，输入文件名