元素面板概览

Dale St. Marthe

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

概览

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

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

• 样式：

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

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

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

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

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

• 属性：选择一个 DOM 节点以检查该对象的自己的属性和继承的属性，并对其进行排序。

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

打开“元素”面板

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

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

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