使用元素面板检查和修改 DOM 元素。
概览
元素面板提供了一个强大的界面,可用于检查和操作 DOM。您可以使用类似于 HTML 文档的 DOM 树来选择特定 DOM 节点,并使用其他工具对其进行修改。
Elements 面板还包含以下包含相关工具的标签页:
样式:
计算出的样式属性:列出应用于元素的已解析属性,这些属性在 Chrome 呈现元素时才会应用。
事件监听器:列出所有事件监听器及其属性。可让您查找事件监听器的来源,以及过滤出被动或屏蔽监听器。
DOM 断点:列出从“元素”面板添加的 DOM 更改断点,并允许您启用、停用、移除或显示这些断点。
属性:选择 DOM 节点以检查和排序对象的自身属性和继承属性。
无障碍:列出具有 ARIA 标签的元素及其属性。可让您切换和检查无障碍功能树(实验性)。
打开“元素”面板
默认情况下,当您打开开发者工具时,系统会打开“元素”面板。您还可以在页面上的任意位置检查节点,以自动打开元素面板。
如需手动打开元素面板,请执行以下操作:
- 打开开发者工具。
- 按以下键打开命令菜单:
- macOS:Command+Shift+P
- Windows、Linux、ChromeOS:Ctrl+Shift+P
- 开始输入
Elements
,选择显示元素,然后按 Enter 键。开发者工具会在开发者工具窗口底部的抽屉中显示元素面板。