元素面板概览

Dale St. Marthe

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

概览

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

Elements 面板还包含以下包含相关工具的标签页：

• 样式：

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

• 计算出的样式属性：列出应用于元素的已解析属性，这些属性在 Chrome 呈现元素时才会应用。

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

• 事件监听器：列出所有事件监听器及其属性。可让您查找事件监听器的来源，以及过滤出被动或屏蔽监听器。

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

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

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

打开“元素”面板

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

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

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