界面概览

使用 Chrome DevTools 的 Elements 面板检查和实时编辑页面的 HTML 与 CSS

Elements 面板

Inspect Mode

快捷键 ctrl shift c/点击面板左上角的按钮,进入元素选择模式
inspect

在新版本 chrome 中,选择元素时会显示更多元素信息
inspect

Device Mode 设备模式

deviceMode

DOM 树

在元素面板左侧是当前页的 DOM 树
0

在 DOM 树中你可以:

Styles

在面板右侧 Styles 窗格中:

0

color picker

Computed

在 Styles 右侧的 Computed 窗格中可以查看:

0

Event Listeners

0

在源代码中加 行 debugger 断点,或者debug(函数)断点(Sources 面板会提及这两种断点),是需要代码维护成本的,有时候还会忘记删除;

或者你想调试别人开发的 你不拥有源码的 网页;

这些时候可以利用 Event Listeners 窗格快速定位当前元素被绑定的所有的事件函数代码并调试。

DOM Breakpoints

在面板右侧 DOM Breakpoints 中,可以查看元素断点

0

相应的在左侧 DOM 树右键点击元素,可以给元素添加断点

元素断点有三种类型:属性变更,子树变更,节点删除

例如添加“node removal”断点,就会在 有代码移除当前节点时,在当前行代码执行前暂停执行,并自动转换到 Sources 面板,以便做进一步调试
0

Properties

Properties 面板会列出元素 DOM 底层相关属性
0

Accessibility(可访问性)

accessibility.png