开源自动化工具在网站中的迭代和调试工具中应用

，即开发者工具，是一套内置的Web开发调试工具，可用于对网站进行迭代、调试和分析。

审查（）

它是一种开源自动化工具，用于分析 Web 应用程序和网页，收集现代性能指标和见解，并允许开发人员根据生成的评估页面优化和改进网站，以改善用户体验。

点击（生成报告），会收集网页的相关信息并生成报告，如下图：

有5个指标：

有关 PWA（渐进式 Web 应用程序）的详细说明，请访问什么是 PWA？文章。

工具菜单

点击右上角︙（工具菜单），有7个选项，分别是：

（表现）

（性能）有6个指标，分别是：

这6个指标对应的权重分别为10%、10%、25%、10%、30%、15%。通过加权平均计算，图中总成绩为95分。详情请参阅分数计算器。）。

查看跟踪

在（指标）部分下，有许多快照显示了该网页的加载方式。单击查看跟踪按钮将带您进入（性能）面板，您可以在其中跟踪加载详细信息。

查看（查看树形图）

单击 View 在新选项卡中打开以查看 JS 的 Bytes（以字节为单位的大小）、Bytes（未使用的字节）和（覆盖）。

显示（显示相关审计）

Show（显示相关审计）由五个指标显示：ALL、FCP、LCP、TBT、CLS。向下滑动以查看两个部分。

在这里可以看到各个方面的性能优化建议，比如图片、css、js文件的处理谷歌开发者页面，以及html中标签的使用、缓存处理等建议谷歌开发者页面，可以用来优化网站。

（可访问性）

当我们说一个网站具有（可访问性）时，我们的意思是该网站的内容是可用的，并且它的功能可以由任何人操作。所有用户都可以使用键盘、鼠标或触摸屏清晰、清晰地与 Web 内容交互，从而获得良好的用户体验。

当我们讨论无障碍功能时，我们经常关注身体残疾的用户。例如，由于视力、身体、年龄等方面的限制，阅读内容、触摸操作、声音信息等都难以获取。让我们看一个例子：

我们可以看到上图存在一些问题：

我们调整了：

无障碍功能各指标项的测试结果是通过还是失败，这与性能指标项的计算方法不同。当页面仅部分通过某个指标时，该页面的该指标将不计分。

例如，如果页面上的某些元素具有屏幕阅读器友好名称而其他元素没有，则 --names 指标将为该页面得分 0。

最好的

Best（最佳实践）得分的得分范围是0-100，影响这个得分的指标的权重都是一样的。