元素面板概览
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
使用 Elements 面板可以检查和修改 DOM 元素。
概览
Elements 面板提供了一个可用于检查和操控 DOM 的强大界面。您可以利用 DOM 树(类似于 HTML 文档)选择特定的 DOM 节点,并使用其他工具进行修改。
元素面板还包含以下包含相关工具的标签页:
打开“元素”面板
默认情况下,当您打开开发者工具时,“元素”面板会打开。您还可以在页面上的任意位置检查节点,让系统自动打开 Elements 面板。
如需手动打开元素面板,请执行以下操作:
- 打开开发者工具。
- 按如下键打开命令菜单:
- macOS:Command + Shift + P
- Windows、Linux、ChromeOS:Ctrl + Shift + P
![命令菜单包含](https://developer.chrome.com/static/docs/devtools/elements/image/command-menu-elements.png?authuser=002&hl=zh-cn)
- 开始输入
Elements
,选择显示元素,然后按 Enter 键。DevTools 会在开发者工具窗口底部的 Drawer 中显示 Elements 面板。
如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2024-03-13。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"没有我需要的信息"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"太复杂/步骤太多"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"内容需要更新"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻译问题"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"示例/代码问题"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"其他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"易于理解"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"解决了我的问题"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"其他"
}]
{"lastModified": "\u6700\u540e\u66f4\u65b0\u65f6\u95f4 (UTC)\uff1a2024-03-13\u3002"}