使用辅助技术导航 DevTools
本文帮助你通过键盘和屏幕阅读器等辅助技术使用 DevTools。 本指南将引导你完成最易于访问的工具和选项卡，并重点介绍可能遇到的问题。
有关与改进网页辅助功能相关的 DevTools 功能，请参阅 辅助功能测试功能。
包含选项卡和页面的选项卡式工具面板
有关选项卡、工具和面板的术语，请参阅 DevTools 概述中的选项卡式工具面板，其中包含选项卡和页面。
从技术上讲，选项卡是 ARIA 选项卡列表。
键盘快捷方式
有关 DevTools 的默认键盘快捷方式，请参阅 键盘快捷方式。 浏览不同工具时，请务必将其加入书签并重新引用它。
打开 DevTools
在 Microsoft Edge 中，可以通过以下任一方式使用鼠标或键盘打开 DevTools。 打开哪个工具取决于打开 DevTools 的方式。
主要方式：
| 操作 | 生成的工具 |
|---|---|
| 右键单击网页上的任何项目，然后选择“ 检查”。 | 元素工具，DOM 树展开以显示右键单击的页面元素。 |
| 按 Ctrl+Shift+I (Windows、Linux) 或 Command+Option+I (macOS) 。 | 以前使用的工具或 欢迎 工具。 |
| 按 F12。 | 以前使用的工具或 欢迎 工具。 |
其他方法：
| 操作 | 生成的工具 |
|---|---|
在 Microsoft Edge 工具栏上，选择“设置和更多” ( ) >更多工具>开发人员工具。 |
以前使用的工具或 欢迎 工具。 |
| 按 Ctrl+Shift+J (Windows、Linux) 或 Command+Option+J (macOS) 。 | 控制台工具。 |
| 按 Ctrl+Shift+C (Windows、Linux) 或 Command+Option+C (macOS) 。 | 元素工具，DOM 树展开以显示<body>元素。 |
| 按 Shift+F10 打开右键单击菜单。 若要选择“ 检查” 命令，请按 向上键 ，然后按 Enter。 | 元素工具，DOM 树展开以显示<html>元素。 |
| 按 Tab 或 Shift+Tab 将焦点放在页面元素上。 然后按 Shift+F10 打开右键单击菜单。 若要选择“ 检查” 命令，请按 向上键 ，然后按 Enter。 | 元素工具，DOM 树展开以显示焦点页元素。 |
在工具之间导航
可以使用键盘导航键或使用命令菜单在工具之间移动。
按键盘导航
- 打开 DevTools 后，按 Ctrl+] (Windows、Linux) 或 Command+] (macOS) 将焦点移动到 活动栏上的下一个工具。
- 按 Ctrl+[ (Windows、Linux) 或 Command+[ (macOS) 将焦点移动到 活动栏上的上一个工具。
- 重复按 Tab 或 Shift+Tab ，直到焦点移动到 活动栏 或 快速视图 工具栏的选项卡，然后使用箭头键在工具之间移动。
已知问题
某些工具（如控制台和性能工具）可能会在选择该工具后立即将焦点移动到工具的内容区域。 这可能会使按箭头键导航变得困难。
所选工具的名称是宣布的，但前提是在工具中宣布了重点内容之后。 此公告序列可能很容易错过工具的名称。
按命令菜单导航
若要选择特定工具，请使用 命令菜单。 在命令菜单中，工具指示为 “面板” 或 “快速视图 ”项。
打开 DevTools 后，按 Ctrl+Shift+P (Windows、Linux) 或 Command+Shift+P (macOS) 打开 命令菜单。
命令菜单是模糊搜索自动完成组合框。
键入工具的名称，然后使用键盘上的 向下键 导航到正确的选项。
按 Enter 运行命令。
若要打开 “元素” 工具，请执行以下操作：
打开 命令菜单。
开始键入 元素，选择“ 显示元素” 命令，然后按 Enter。
以这种方式打开工具可将焦点放在工具的内容区域中。 对于 “元素” 工具，焦点将移动到 DOM 树中。
元素工具
检查页面上的元素
使用屏幕阅读器中的光标转到要检查的元素。
右键单击元素，然后选择“ 检查 ”选项。 这会 打开“元素”工具，并将元素聚焦在 DOM 树中。
DOM 树布局为 ARIA 树。 有关示例，请参阅使用键盘导航 DOM 树。
复制 DOM 树中元素的代码
右键单击 DOM 树中的节点。
展开 “复制” 选项。
选择“ 复制 outerHTML”。
已知问题
- 复制 outerHTML 通常不会选择当前节点，而是选择父节点。 但是，元素的内容仍应位于复制
outerHTML的 中。
修改 DOM 树中元素的属性
当焦点位于 DOM 树的节点上时，按 Enter 编辑节点。
按 Tab 在属性值之间移动。 听到“空格”时，你位于空文本输入中，可以键入新的属性值。
按 Ctrl+Enter (Windows、Linux) 或 Command+Enter (macOS) 接受更改并收听元素的全部内容。
已知问题
- 键入文本输入时，不会收到任何反馈。 如果拼写错误并使用箭头键浏览输入，也不会收到任何反馈。 检查工作的最简单方法是接受更改，然后侦听要宣布的整个元素。
编辑 DOM 树中元素的 HTML
当焦点位于 DOM 树的节点上时，按 Enter 编辑节点。
按 Tab 在属性值之间移动。 当听到元素的名称（例如 ）时，
h2你位于文本输入中，并且可以更改元素的类型。按 Ctrl+Enter (Windows、Linux) 或 Command+Enter (macOS) 接受更改。
例如，键入 h3 ，然后按 Ctrl+Enter (Windows、Linux) 或 Command+Enter (macOS) 时，元素的 h3 开始和结束标记会更改。
元素工具中的选项卡
元素工具包含用于检查应用于元素的 CSS 或辅助功能树中相关位置等内容的其他选项卡。
当焦点位于 DOM 树上时，请按 Tab ，直到听到“ 样式 ”窗格已选中。
按 向右键 浏览其他可用选项卡。
DOM 树将具有href属性的元素转换为可聚焦链接，因此可能需要多次按 Tab 才能访问“样式”窗格。
已知问题
DOM 断点和属性选项卡无法通过键盘进行访问。
“样式”窗格
“ 样式 ”窗格包含用于筛选样式、切换元素状态 (（如 ：active 和 ：focus) 、切换类和添加新类）的控件。 还有一个功能强大的样式检查工具，用于浏览和修改当前应用于 DOM 树中具有焦点的元素的样式。
要了解“ 样式 ”窗格的关键概念是，它仅显示 DOM 树中当前所选节点的样式。 例如，假设检查完节点的 <header> 样式，现在想要查看节点的样式 <footer> 。 为此，首先需要在 DOM 树中选择<footer>节点。
你可能会发现，使用 “检查” 工作流检查位于节点 (一般附近的 footer 节点，例如页脚) 中的链接，该链接侧重于 DOM 树，然后使用键盘导航到你感兴趣的确切节点。
导航“样式”窗格
由于所有样式工具都以某种方式连接回 “样式 ”窗格，因此最好先成为此工具的专家。
焦点位于“ 样式 ”窗格上，按 Tab 将焦点移到其中并浏览内容。
按 Tab ，直到第一个样式变为活动状态。 如果你使用的是屏幕阅读器，则第一种样式将宣布为
element.style {}。按 向下键 可按特定顺序导航样式列表。 屏幕阅读器以 CSS 文件的名称、样式的显示行号和样式名称开头，朗读每个样式。 例如，
main.css:233 .card__img {}。按 Enter 可更详细地检查样式。 焦点从样式名称的可编辑版本开始。
按 Tab 可在每个 CSS 属性的可编辑版本与相应值之间移动。 每个样式块的末尾都有一个空白的可编辑文本字段，可用于添加其他 CSS 属性。
可以继续按 Tab 在样式列表中移动，或按 Escape 退出模式并返回按箭头键导航。
有关其他快捷方式，请参阅 样式窗格键盘参考。
已知问题
- 如果使用 “筛选 可编辑文本”字段，则无法导航样式列表。
切换元素状态
切换元素的状态，如 :active 或 :focus：
转到“ 样式 ”窗格，然后按 Tab ，直到“ 切换元素状态 ”按钮具有焦点。
按 Enter 可显示 “强制元素状态 ”部分，其中包含复选框。
按 Tab ，直到第一个状态
:active具有焦点。按 空格键 选择 (启用) 复选框。 如果 DOM 树中当前选定的元素具有
:active样式，则现在将应用该样式。按 Tab 浏览所有可用状态。
添加现有类
“ 元素类 ”按钮位于 “切换元素状态 ”按钮旁边。 若要将焦点移动到“ 元素类 ”按钮，请按 Tab，然后按 Enter。 焦点将移动到标记为 “添加新类”的编辑文本字段中。
“ 元素类 ”按钮主要用于向元素添加现有类。 例如，如果样式表包含名为 .clearfix的帮助程序类，则可以在编辑文本字段内按 . 以显示类的建议列表，并使用 向下键 查找 .clearfix 建议。 或者自行键入类名，然后按 Enter 应用它。
添加新样式规则
与“ 元素类 ”按钮相邻的是“ 新建样式规则 ”按钮。 若要将焦点移动到该焦点，请按 Tab ，然后按 Enter。 焦点将移动到样式检查器内的可编辑文本字段。 字段的初始文本内容是在 DOM 树中选择的元素的标记名称。 可以在此字段中键入所需的任何类名，然后按 Tab 为其分配 CSS 属性。
“计算”选项卡
将焦点置于“ 计算 ”选项卡上时，按 Tab 将焦点移到其中并浏览内容。 在“ 计算 ”选项卡中，有一些控件用于探索哪些 CSS 属性实际按特定顺序应用于元素。
探索所有计算样式
按 Tab ，直到到达计算样式的集合。 计算样式显示为 ARIA 树。 展开列表框会显示应用计算样式的 CSS 选择器。 这些选择器按特定性进行组织。 屏幕阅读器将读出计算值、CSS 选择器当前匹配的值、包含选择器的样式表的文件名以及选择器的行号。
已知问题
- 如果使用 “筛选文本” 字段，则无法再检查样式。
“事件侦听器”选项卡
若要检查应用于元素的事件侦听器，请选择“ 元素 ”工具，然后选择“ 事件侦听器 ”选项卡 (与 “样式 ”选项卡) 分组。
当焦点位于“ 样式 ”选项卡上时，按 向右键 导航到“ 事件侦听器 ”选项卡。
浏览事件侦听器
事件侦听器显示为 ARIA 树。 可以使用箭头键来导航它们。 屏幕阅读器将读出事件侦听器所附加到的 DOM 对象的名称，以及定义事件侦听器的文件名和行号。
“辅助功能”选项卡
选择要在“元素”工具的“辅助功能”选项卡中移动的 Tab 键。
“ 辅助功能 ”选项卡靠近“ 样式 ”选项卡。在“辅助功能”选项卡上，有用于浏览辅助功能树的控件、应用于元素的 ARIA 属性以及计算的辅助功能属性。 请参阅 使用“辅助功能”选项卡测试辅助功能。
辅助功能树
辅助功能树显示为 ARIA 树，其中每个treeitem树对应于 DOM 中的元素。 树将报出所选节点的计算角色。 和 等divspan泛型元素在树中被宣布为“GenericContainer”。 使用箭头键遍历树并浏览父子关系。
已知问题
- “辅助功能”选项卡使用的 ARIA 树类型可能无法在 Microsoft Edge 中正确公开 macOS 屏幕阅读器（如 VoiceOver）。 订阅Chromium问题 #868480，了解此问题的进度。
- 每个 ARIA 属性 和 计算属性 部分都标记为 ARIA 树，但每个部分当前没有焦点管理，并且无法通过键盘操作。
保留检查工具的工具提示和网格颜色覆盖
单击“ 检查 工具”按钮并在呈现的网页中四处移动时，“检查”工具提示会更改。 若要保持显示当前工具提示和网格颜色覆盖，请在呈现网页中移动时按住 Ctrl+Alt (Windows、Linux) 或 Ctrl+Option (macOS) 。
使用屏幕放大镜或其他辅助技术时，此方法非常有用。 如果不使“检查”工具的工具提示保持不变，则使用 “检查工具 ” (“ 
) 时，悬停覆盖将不断更改。
请参阅 使用检查工具分析页面。
Lighthouse 工具
Lighthouse 针对站点运行一系列测试，以检查与性能、可访问性、SEO 以及许多其他类别相关的常见问题。
配置并生成报表
首次在 DevTools 中打开 Lighthouse 工具时，焦点将放在 “生成报表 ”按钮上。 默认情况下，窗体配置为在模拟 3G 连接上使用移动仿真为每个类别运行报表。
若要更改报表设置，请使用 Shift+Tab 将焦点放在 Lighthouse 设置上，或导航回浏览模式。
准备好运行报表时，请导航回 “生成报表 ”按钮，然后按 Enter。
焦点将移动到模式窗口中，其中包含“ 取消 ”按钮，该按钮允许退出审核。 运行审核并多次刷新页面时，可能会听到一系列耳塞。
已知问题
- 配置窗体的不同部分当前未使用
fieldset元素进行标记。 在浏览模式下导航它们可能更容易，以确定哪些控件与每个部分相关联。 - 运行完审核后，不会有 earcon 或实时区域公告。 通常，审核大约需要 30 秒，之后你应该能够导航到结果。 使用浏览模式可能是访问结果的最简单方法。
导航 Lighthouse 报表
Lighthouse 报告分为对应于每个审核类别的各部分。 报表随即打开，其中包含每个类别的分数列表。 这些分数也是可用于跳到相关部分的链接。 每个部分中都有可 details 展开的元素，其中包含与通过或失败的审核相关的信息。 默认情况下，仅显示失败的审核。 每个部分都以最后 details 一个元素结尾，其中包含所有通过的审核。
若要运行新的审核，请使用 Shift+Tab 退出报表，然后选择“ 生成报告 ”按钮。
另请参阅
注意
此页面的部分内容是基于 Google 创建和 共享 的工作进行的修改，并根据 Creative Commons 署名 4.0 国际许可中所述的条款使用。 原始页面 在此处 找到，由 Rob Dodson (Contributor、Google WebFundamentals) 创作。
