GoogleChrome
开发人员工具入门
•
Elements 面板
•
Console 面板
•
Sources 面板
•
Network 面板
以下将使用
Chrome 37
版本为例进行讲解
Elements 面板
Elements 面板主要用来查看当前页面的组成结构，可以
查看到页面 DOM 节点的实时状态。
Elements 面板可以完成以下工作：
•
审查 Web 页面上的 HTML 和 CSS
•
实时编辑调试 HTML 和 CSS
•
设置 DOM 断点
① 页面当前状态的 DOM
树
② 当前选中 DOM 节点的
XPath 路径
③ 与当前选中 DOM 节点
相关联的 CSS 样式、
事件监听器、 DOM 断
点等信息
①
②
③
