Dale St. Marthe
使用元素面板检查和修改 DOM 元素。
概览
元素面板提供了一个强大的界面，可用于检查和操作 DOM。您可以使用类似于 HTML 文档的 DOM 树来选择特定 DOM 节点，并使用其他工具对其进行修改。
Elements 面板还包含以下包含相关工具的标签页：
样式：
- 查看和调试应用于所有样式表中元素的 CSS 规则。
- 查找任何无效、被替换、无效或其他 CSS，这些 CSS 未按预期运行。
- 通过Box 模型互动来修改元素。
- 使用 DOM 树中的标记访问容器编辑选项。
计算出的样式属性：列出应用于元素的已解析属性，这些属性在 Chrome 呈现元素时才会应用。
布局：包含用于修改flexbox 叠加层的选项。
事件监听器：列出所有事件监听器及其属性。可让您过滤出被动或屏蔽监听器。
DOM 断点：列出从“元素”面板添加的 DOM 更改断点，并允许您启用、停用、移除或显示这些断点。
属性：选择 DOM 节点以检查和排序对象的自身属性和继承属性。
无障碍：列出具有 ARIA 标签的元素及其属性。可让您切换和检查无障碍功能树（实验性）。
打开“元素”面板
默认情况下，当您检查节点，以自动打开元素面板。
如需手动打开元素面板，请执行以下操作：
- 打开开发者工具。
- 按以下键打开命令菜单：
- macOS：Command+Shift+P
- Windows、Linux、ChromeOS：Ctrl+Shift+P
- 开始输入
Elements，选择显示元素，然后按 Enter 键。开发者工具会在开发者工具窗口底部的抽屉中显示元素面板。