元素面板概览

Dale St. Marthe

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

概览

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

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

• 样式：

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

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

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

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

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

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

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

打开“元素”面板

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

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

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