Web Inspector 中的审计功能

在创建网页时，通常会有一系列由网站作者或所包含的库/框架设定的特定规则或指南。在这种情况下，要找出任何违反这些规则/指南的情况可能很繁琐，更不用说是否有意愿去这么做。举个简单的例子，常常会忘记在<img>上设置title或alt属性，但包含它们非常重要，因为这有助于辅助功能工具理解和/或导航页面。

对于那些需要重复检查页面是否符合预期的情况，我们创建了一个新工具，我们称之为 Web Inspector 审计功能，它可以帮助简化这个过程。

审计选项卡

Web Inspector 审计功能可以在新的“审计”选项卡中找到，它以审计树的形式呈现，每个审计都可以针对被检查的页面运行。审计可以是其他审计的组（例如，一个测试组），也可以是单个测试用例。

每个审计都可以有五种不同的结果级别，每种级别都由不同的图标表示。

• 通过表示一切正常的结果。
• 警告是一种“软通过”，表示没有错误，但有些地方需要更改。
• 失败表示有问题。
• 当运行的 JavaScript 抛出错误时，会产生错误结果。
• 不支持是一种特殊情况，用于表示当前页面不支持正在测试的数据时（例如，缺少某些 API）。

审计功能也可以被禁用，以允许对实际运行的内容进行更多控制。这可以通过单击导航侧边栏底部的编辑按钮来完成。

默认审计

Web Inspector 本身也提供了一些默认包含且无法删除（只能禁用）的审计。

演示审计是对审计功能/界面的基本展示，可以作为编写自己审计的入门模板。

可访问性包含了一些测试用例，根据 WAI-ARIA 规范，检查被检查页面上的 DOM 可访问性最佳实践，例如本文开头提到的示例。可访问性审计是确保页面可访问性的绝佳起点。

导入和导出

当我们开始考虑审计概念时，一个首要的想法是审计及其结果都应该是可移植的。这是我们选择使用 JSON 作为审计及其结果格式的主要原因。

所有审计都可以从任何 Web Inspector 中导入和导出，无论该特定审计是否可以在当前页面上运行（参见上面的不支持解释）。任何导入的审计都会在 Web Inspector 会话中持久存在，这意味着你可以在检查一个页面时导入一个审计，在另一个页面上打开 Web Inspector，然后在新页面上运行相同的审计而无需重新导入。这使得你可以轻松地与世界各地的其他开发人员分享你使用过（甚至编写过）的审计。

审计结果也类似地可导入/导出，但它们不会在会话之间保留。这样，如果你运行一个审计并遇到任何非通过的结果，你可以导出它并与周围的人分享数据，这可能会帮助你找到正确的处理方式。

演示

查看 Web Inspector 审计功能如何工作的最简单方法是直接在任何页面上运行它们。

作为更高级用法的演示，eslint.json 是一个审计，它针对从被检查页面主源加载的每个 *.js 资源运行 ESLint。如果你有兴趣编辑这个审计，甚至编写自己的审计，请参阅即将发布的关于创建 Web Inspector 审计的文章。

反馈

“审计”选项卡已添加到 Safari 技术预览版 75 中。在编写/运行审计时，是否有不支持的工作流程或未公开的数据是您希望使用的？您是否有一个应该包含在 Web Inspector 中的默认审计想法？请告诉我们！欢迎在 Twitter 上向我们发送反馈（@dcrousso 或 @jonathandavis），或者提交错误报告。