如何激活DevTools审查元素工具？（Edge网页开发者F12审查元素调试模式）

使用 “审查 ”工具查看有关呈现网页中的项的信息。

• 当 审查 工具处于活动状态时，将 鼠标悬停在 网页中的项上，DevTools 会在网页上添加信息覆盖信息和网格突出显示。

• 在网页中 单击 某个项时， 元素 工具中的 DOM 树会自动更新，以显示与呈现的网页中单击的项相对应的 DOM 元素，以及“ 样式 ”选项卡中的 CSS 样式。

如何激活DevTools“审查”工具

若要试用 “审查 ”工具，请执行以下操作：

1. 在新窗口或选项卡中打开 “审查演示 ”页。

2. 右键单击演示网页中的任意位置，然后选择 “审查”以打开 DevTools。

3. 在 DevTools 的左上角，单击“ 审查”工具 () 按钮。 或者，当 DevTools 具有焦点时，请按Ctrl++Shift``C (Windows、Linux) 或C``Command+Shift+ (macOS) 。

   

   按钮图标 () ，指示 “审查 ”工具处于活动状态。

4. 在呈现的网页中，将鼠标悬停在项上，并观看信息覆盖和网格突出显示。

5. 单击呈现的网页中的项。

   元素工具中的 DOM 树会自动更新，以显示与呈现的网页中的单击项相对应的 DOM 元素，以及“样式”选项卡中的 CSS 样式。 在网页中单击也会关闭网页中的 “审查”模式。

从“审查”覆盖层获取元素信息

当 “审查 ”工具处于活动状态时，悬停在呈现的网页上的任何元素上会显示 “审查 ”覆盖层。 审查覆盖显示有关该元素的常规和辅助功能信息。

将鼠标悬停在呈现的页面上的页面元素上时，DOM 树会自动展开，以突出显示你悬停在上面的元素。

“审查”覆盖显示有关该元素的以下信息：

• 元素的名称。

• 元素的维度（以像素为单位）。

• 元素的颜色，作为十六进制值和颜色监视器。

• 元素的字体设置。

• 元素的边距和填充（以像素为单位）。

显示的信息取决于元素的类型和应用于它的样式。 如果元素是使用 CSS 网格或 CSS 弹性框定位的，则在“审查”覆盖层中元素名称旁边会显示另一个图标：

“审查”覆盖的 “辅助功能”部分显示以下相关信息：

• 文本颜色对比度。

• 报告给辅助技术的元素的名称和角色。

• 元素是否可对键盘进行焦点处理。

例如，在 “审查演示 ”页中，对于 Bad Contrast 按钮，“ 审查 ”覆盖层在对比度值 1.77 旁边有一个警告图标。 “ 审查 ”覆盖层还显示按钮无法通过键盘聚焦。 无法通过键盘导航到该按钮，因为按钮是作为具有 <div> 类的元素实现的 button，而不是作为 <button> 元素实现的。

审查不可访问的元素

具有 CSS 属性的 pointer-events: none 元素对 “审查 ”工具不可用。 在 “审查演示 ”页中，将鼠标悬停在该页上 Overlay Button ，你将看到父元素 (div.wrapper) 显示，而不是 Overlay Button显示。

若要审查具有 CSS 属性的 pointer-events: none元素，请在将鼠标悬停在元素上时按 Shift 下。 页面布局区域上还有一个颜色覆盖，指示处于高级选择模式。

选择元素并终止“审查”模式

单击呈现的页面中的元素时：

• “审查”工具已停用。

• 突出显示了相应的 DOM 节点。

• 样 式 工具显示应用于元素的 CSS。

保留审查工具的工具提示和网格颜色覆盖

使用 “审查 ”工具并在呈现的网页周围移动时，可以保留当前的 “审查 ”覆盖层。 在呈现的网页中四处移动时，按住Ctrl+Alt (Windows、Linux) 或Ctrl+Option (macOS) 。 将鼠标悬停在呈现网页的不同部分时，“ 审查 ”工具的现有工具提示和网格颜色覆盖仍会显示。

暂时隐藏“审查”元素工具提示

若要在将鼠标指针移到呈现的网页上时隐藏 审查 工具的覆盖，请按住 Ctrl。