元素面板概览

Dale St. Marthe

使用元素 面板检查和修改 DOM 元素。

概览

元素 面板提供了一个强大的界面来检查和操控 DOM。您可以使用类似于 HTML 文档的 DOM 树来选择特定的 DOM 节点，并使用其他工具对其进行修改。

元素 面板还包含以下标签页，其中包含相关工具：

• 样式：

  • 查看和调试应用于元素的所有样式表的 CSS 规则。
  • 查找任何 无效、被替换、处于非活动状态或其他 CSS，这些 CSS 无法按预期运行。
  • 通过 添加声明、应用类以及与 盒模型 互动来修改元素。
  • 使用 DOM 树中的 徽章 访问容器修改选项。

• 计算：列出 Chrome 呈现元素时应用于元素的已解析属性。

• 布局：包含用于修改网格和Flexbox叠加层的选项。

• 事件监听器：列出所有事件监听器及其属性。让您能够查找事件监听器的来源，并按被动或屏蔽监听器进行过滤。

• DOM 断点：列出从“元素”面板添加的 DOM 更改断点，并让您能够启用、停用、移除或显示这些断点。

• 属性：选择一个 DOM 节点，以检查和排序对象的自有属性和继承属性。

• 无障碍功能：列出具有 ARIA 标签的元素及其属性。让您能够切换和检查无障碍功能树（实验性功能）。

打开“元素”面板

默认情况下，当您打开开发者工具时，“元素”面板也会打开。您还可以检查节点页面上的任何位置，以自动打开元素面板。

如需手动打开元素 面板，请执行以下操作：

1. 打开开发者工具。
2. 按以下键打开命令菜单 ：
   • macOS：Command+Shift+P
   • Windows、Linux、ChromeOS：Control+Shift+P
3. 开始输入 Elements，选择 显示元素，然后按 Enter。开发者工具会在开发者工具窗口底部的抽屉式导航栏 中显示元素 面板。