使用Chrome开发者工具选择调试页面元素

现在我们切换到Elements(元素)面板，可以检查并实时编辑页面中的HTML和CSS。

对于一个开发者来说，日常最主要用的功能主要有两个：

1. 查看/修改HTML元素。 从而不需要任何真实的代码改动，就能看到实际的运行结果。可以用来快速调试、测试等等。
2. 查看/修改CSS样式。 可以快速地试验某些样式的改动，然后再复制到真实的代码中去。

查看/修改HTML元素

请看下面这个例子。

上图中要注意几点：

1. 图片中红色框里面标注除了元素选择器，鼠标点了之后，可以在左侧页面部分选择任意的HTML元素，Chrome会高亮出来页面选中的部分，右侧HTML代码区也会自动定位到具体的DOM元素；
2. 图中右侧橙色框里面的是选中的元素，鼠标双击可以进行编辑，回车之后可以看改动的效果；
3. 橙色框里元素左边有...菜单，在这里还可以做添加属性、复制元素、设置断点等不太常用的操作，用到的时候可以到这里找。

在页面上的任何改动，都只是本地临时的改动，别的用户看不到，页面刷新之后改动也会被自动清除。

查看/修改CSS样式

这个功能也是很强大，很常用。看下面的图示：

上图中要注意几点：

1. Styles面板下面左侧栏显示的是这个元素上应用的CSS样式，右侧上方紫色框里是盒子模型的各种数据，右侧下方式最终计算出来的实际样式；
2. 绿色框里element.style里可以填任意的样式，样式会内联到HTML元素里，因此CSS优先级是最高的；
3. 红色框里是元素的class样式，你可以修改现有样式，也可以增加新的样式，鼠标单击到属性或值上就可以编辑。

做个总结，元素面板是个强大、易用的功能，本文只是列举了最常用的功能，更多的功能，你以后可以自行去发掘。