网页检查器参考审计选项卡

目录

• 运行审计
• 审计结果
• 共享审计
• 默认审计
• 编辑审计
• 创建审计

审计选项卡包含审计集合，每个审计都可针对被检查的页面运行，以检查不正确的 DOM 结构、缺失的可访问性属性、正确的设计系统规则等等。审计可以是一组其他审计（例如，一个测试组），或者一个单独的测试用例，它本质上是一段 JavaScript 代码片段，在运行时将在被检查的页面中执行。

运行审计

当 单击开始按钮时，所有已启用的审计将按其在导航侧边栏中出现的顺序逐一运行。可以通过单击悬停时出现的[开始]按钮来运行单个审计。按下空格键也将运行选定的审计。

审计运行结束后，结果将内联显示，替换任何之前的结果。此外，结果将保存在导航侧边栏中顶层结果文件夹下的单独的运行 1、运行 2、…、运行 N 文件夹中。

审计结果

每个测试用例可以有五种不同的结果之一。

• 通过表示未发现任何问题的结果。
• 警告是“有问题的通过”，即没有严重错误，但有些地方应该更改。
• 失败表示发现严重问题。
• 错误发生在测试函数运行期间抛出错误时。
• 不支持是一种特殊情况，可用于指示当前页面不支持正在测试的数据时（例如，缺少某些 API）。

除了结果级别，每个单独测试用例的开始和耗时也会显示。对于导入的测试用例结果，还会显示运行该测试用例的页面的 URL。

共享审计

所有审计都可以通过单击 导出、按下⌘ S，或右键单击并选择保存测试（或保存结果）来导出。先前导出的审计可以稍后通过单击 导入或通过拖放导入，无论该特定审计是否可以在当前页面上运行。导入的审计在 Web 检查器会话之间也会保留。

审计结果同样可以导出或导入，虽然它们在检查的页面导航中会保留，但在 Web 检查器会话之间不会保留。如果测试用例结果包含 DOM 节点并在与被检查页面相同 URL 的页面上运行，Web 检查器将尝试在被检查页面中查找具有相同 CSS 路径的节点，对于任何匹配的节点，会像它们被记录到控制台一样显示预览。

默认审计

Web 检查器默认也提供了一些审计

• 演示审计是对审计功能和界面的全面介绍，可以用作编写自定义审计的入门模板。
• 可访问性包含一些测试用例，它们根据 WAI-ARIA 规范检查被检查页面上的 DOM 可访问性最佳实践，例如确保所有 <img> 都设置了 title 或 alt。

这些默认审计无法修改或删除，只能禁用。

编辑审计

单击导航侧边栏底部的编辑按钮将进入编辑模式，在此模式下可以创建、修改、启用/禁用审计，甚至完全删除（注意：此操作无法撤销）。这适用于单个测试用例和整个组，从而可以更好地控制运行哪些测试以及它们执行什么操作。在非编辑模式下，禁用的审计会被隐藏。

在编辑模式下，可以按删除键来删除审计。

创建审计

除了 Web 检查器提供的默认审计以及在编辑模式下在 Web 检查器中创建的任何新审计之外，还可以从文件中将自定义审计导入到 Web 检查器中。审计使用简单且高度灵活的 JSON 结构，其中有两种主要类型

• 组

{
    "type": "test-group",
    "name": "...",
    "tests": [<audit 1>, <audit 2>, ..., <audit N>]
}

• 测试用例

{
    "type": "test-case",
    "name": "...",
    "test": "function() { ... }"
}

在编辑模式下，这些结构中的每个字段在 Web 检查器中都有特定的输入。

允许使用 async 函数，以及返回 Promise 的非 async 函数。唯一的要求是函数或已解析 Promise 返回值符合以下规则

• 返回 true/false 将转换为通过/失败结果，不带额外数据。
• 返回字符串将转换为相应的结果（例如，"pass" 是通过结果），不带额外数据。
• 返回一个对象提供了最大的灵活性，因为它允许除了审计结果之外的额外数据在审计选项卡中显示。结果级别首先从 "level" 属性（如果存在）中获取，并以与返回字符串相同的方式进行转换（例如，"level": "pass" 是通过结果）。另外，使用任何级别作为键并将其值设为 true 将具有相同的效果（例如，"pass": true）。此外，作为结果对象的一部分，可以返回三项数据，它们具有专用的特殊接口
  • domNodes 是一个 DOM 节点数组，它将在审计选项卡中显示，方式与它们记录到控制台非常相似。
  • domAttributes 是一个字符串数组，其中每个字符串都将在 domNodes 中的任何 DOM 节点上突出显示（如果存在）。
  • errors 是一个 Error 数组，可以用作公开在运行审计时遇到的错误的方式。
    • 如果此数组有任何值，则审计结果会自动更改为错误。
    • 如果在运行审计时抛出错误，它将自动添加到此列表中。

添加到结果对象的其他自定义数据将在审计选项卡中显示。版本 3

审计 JSON 结构还支持以下可选属性

• description 是一个基本字符串，显示在审计选项卡中，用于提供有关该特定审计的更多信息，例如其功能或测试目的。
• supports 可以用作功能检查的替代方案，因为它会阻止审计运行，除非其数值与 Web 检查器的审计版本号匹配，该版本号可在编辑模式下在审计选项卡的主内容区底部找到。当前版本是 4。
• setup 是一个字符串，类似于测试用例的 test 函数，但它允许在组中使用，并且仅在为顶级审计（即，不在组内的审计）提供时才有效。setup 在审计的其余部分运行之前进行评估，从而可以轻松地在组中的所有审计之间共享代码，而无需担心该组中的哪些审计被启用/禁用。版本 2

特殊审计函数

由于审计是从 Web 检查器运行的，因此会向每个执行的 test 函数公开额外信息。Web 检查器中可用的这些数据无法通过 JavaScript 访问。

这些信息通过一个 WebInspectorAudit 对象公开给每个 test 函数。请注意，WebInspectorAudit 在给定顶级审计下的所有 test 函数之间共享。因此，将数据附加到 WebInspectorAudit 以在多个 test 函数之间共享是被接受和鼓励的，只要该数据不覆盖以下任何属性。

版本

在 test 函数中访问 Web 检查器的审计版本号就像获取 WebInspectorAudit.Version 的值一样简单。在编辑模式下，这个数字也会显示在审计选项卡的主内容区底部。当前版本是 4。

资源

以下所有内容都与处理页面加载的资源有关，并由 WebInspectorAudit.Resources 持有。

• getResources() 返回一个对象列表，每个对象对应于被检查页面加载的特定资源，由字符串 url、字符串 mimeType 和审计特定的 id 标识。
• getResourceContent(id) 返回一个对象，包含具有给定审计特定 id 的资源的字符串 data 和布尔 base64Encoded 内容。

DOM

以下所有内容都与处理 DOM 有关，并由 WebInspectorAudit.Resources 持有。

• hasEventListeners(node[, type]) 根据给定的 DOM node 是否有任何事件监听器，或者是否有针对给定 type 的事件监听器（如果指定）返回 true/false。
• simulateUserInteraction(callback) 将执行给定的 callback，就好像它是由用户触发的一样。版本 4

可访问性

以下所有内容都与处理可访问性树有关，并由 WebInspectorAudit.Accessibility 持有。更多信息可以在 WAI-ARIA 规范中找到。

• getElementsByComputedRole(role[, container]) 返回一个 DOM 节点数组，这些节点与给定role匹配，并且是 container DOM 节点（如果指定）或主文档的子节点。
• getActiveDescendant(node) 返回给定 DOM node 的活动后代。
• getMouseEventNode(node) 返回将处理鼠标事件的 DOM 节点，该节点是给定 DOM 节点或其子节点。
• getParentNode(node) 返回可访问性树中给定 DOM node 的父 DOM 节点。
• getChildNodes(node) 返回可访问性树中给定 DOM node 的子 DOM 节点数组。
• getSelectedChildNodes(node) 返回可访问性树中给定 DOM node 的当前选中的 DOM 节点数组。
• getControlledNodes(node) 返回由给定 DOM node 控制的 DOM 节点数组。
• getFlowedNodes(node) 返回从给定 DOM node 流向的 DOM 节点数组。
• getOwnedNodes(node) 返回由给定 DOM node 拥有的 DOM 节点数组。
• getComputedProperties(node) 返回一个对象，其中包含给定 DOM node 的各种可访问性属性。由于 HTML 允许标记中出现“不正确”的值（例如，属性的无效值），因此以下属性使用 WebKit 确定的计算值
  • busy 是一个与 aria-busy 属性相关的布尔值。
  • checked 是一个与 aria-checked 属性相关的字符串。
  • currentState 是一个与 aria-current 属性相关的字符串。
  • disabled 是一个与 aria-disabled 属性相关的布尔值。
  • expanded 是一个与 aria-expanded 属性相关的布尔值。
  • focused 是一个布尔值，表示给定 node 是否聚焦。
  • headingLevel 是一个与 aria-level 属性和各种 HTML 标题元素相关的数字。
  • hidden 是一个与 aria-hidden 属性相关的布尔值。
  • hierarchicalLevel 是一个与 aria-level 属性相关的数字。
  • ignored 是一个布尔值，表示给定 node 当前是否在可访问性树中被忽略。
  • ignoredByDefault 是一个布尔值，表示给定 node 是否总是被可访问性树忽略。
  • invalidStatus 是一个与 aria-invalid 属性相关的字符串。
  • isPopUpButton 是一个与 aria-haspopup 属性相关的布尔值。
  • label 是一个与 aria-label 属性相关的字符串
  • liveRegionAtomic 是一个与 aria-atomic 属性相关的布尔值。
  • liveRegionRelevant 是一个与 aria-relevant 属性相关的字符串数组。
  • liveRegionStatus 是一个与 aria-live 属性相关的字符串。
  • pressed 是一个与 aria-pressed 属性相关的布尔值。
  • readonly 是一个与 aria-readonly 属性相关的布尔值。
  • required 是一个与 aria-required 属性相关的布尔值。
  • role 是一个与 role 属性相关的字符串。
  • selected 是一个与 aria-selected 属性相关的布尔值。