元素模板

借助元素模板，我们可以实时编辑页面的HTML和CSS，包括：

1. 在Elements面板中检查和实时编辑DOM树种的任何元素
2. 在Styles窗格中查看和更改应用到任何选定元素的CSS规则
3. 在Computed窗格中查看和修改选定元素的框模型
4. 在Source面板中查看在本地对页面所有的更改

查看本地更改

1. 在 Styles 窗格中，点击您修改的文件，DevTools 会将您带到 Sources 面板
2. 右键点击文件
3. 选择 Local modifications

编辑样式

在Styles窗格可以显示应用到选定元素的CSS规则，优先级从高到低：

1. 顶端为element.style
2. 下方是与元素匹配的任何 CSS 规则
3. 再下方是继承的样式，其中包括与选定元素的祖先实体匹配的任何可继承样式规则
4. 最后是伪类元素，比如::before、::after

灰色的条目不是已定义的规则，而是在运行时计算的规则

元素的属性

我们可以通过单击面板中的属性名称或者值进行修改，也可以通过复选框来取消或重用属性，还可以点击空白区域进行添加新的属性声明。

我们还可以通过把鼠标放在右下角的由三个点组成的图标，可以看到快捷方式，如下：

从左至右依次是：

1. 添加文字阴影
2. 添加框阴影
3. 添加color
4. 添加背景颜色

元素的class

通过点击如下的.cls，我们可以查看元素目前的class属性中的值：

我们还可以通过Add new class来添加新的class到元素上。

元素的伪类

可以通过在面板中右键标签，并选择Force state强制元素进入伪类状态。

也可以通过在Styles窗格中进行操作，如下图：

取色器

Devtools提供了方便编辑颜色的工具：

1. 取色器。请参阅取色器了解更多信息。
2. 当前颜色。当前值的可视表示。
3. 当前值。当前颜色的十六进制、RGBA 或 HSL 表示。
4. 调色板。请参阅调色板了解更多信息。
5. 着色和阴影选择器。
6. 色调选择器。
7. 不透明度选择器。
8. 颜色值选择器。点击可以在 RGBA、HSL 和十六进制之间切换。
9. 调色板选择器。点击可以选择不同的模板。

检查和编辑框模型参数

1. 同轴矩形包含当前元素 padding、border 和 margin 属性的 top、bottom、left、right 值
2. 对于位置为非静态的元素，还会显示 position 矩形，包含 top、right、bottom 和 left 属性的值
3. 对于 position: fixed 和 position: absolute 元素，中心域包含选定元素实际的 offsetWidth × offsetHeight 像素尺寸

编辑 DOM

通过Elements面板，我们可以：

1. 查看页面的架构
2. 查看和编辑单个元素相关的属性
3. 移动和删除DOM节点
4. 使用Scroll into View让选中的元素出现在视图中

设置DOM断点

设置 DOM 断点以调试复杂的 JavaScript 应用，包括如下DOM操作：

1. 子树修改
2. 属性修改
3. 节点移除

添加了DOM断点后，可以在DOM Breakpoints窗格中查看。

查看元素事件监听器

通过Event Listeners窗格我们可以查看已注册的事件侦听器。

Ancestors，如果启用 Ancestors 复选框，除了当前选定节点的事件侦听器外，还会显示其祖先实体的事件侦听器。如果停用复选框，将仅显示当前选定节点的事件侦听器。
Framework listeners，启用 Framework listeners 复选框时，DevTools 会自动解析事件代码的框架或内容库封装部分，然后告诉您实际将事件绑定到代码中的位置。如果停用 Framework listeners 复选框，事件侦听器代码很可能会在框架或内容库代码的其他地方解析。

参考

检查和调整页面
编辑样式
编辑DOM