Chrome DevTools之Elements

      对于前端工程师来说，最重要的调试工具莫过于Chrome浏览器的DevTools了。相信做过前端的小伙伴都用过，但有些小伙伴可能并没有完全了解到里面所有的东西，遂在此做个详细的总结。

      DevTools中的调试面板有很多，如下图，将在后面的文章中分别进行介绍，本篇重点介绍Elements-元素面板

一、查看与选择DOM节点

      1、在想要定位的元素上方右键，点击检查，DevTools打开后，Elements面板自动定位到选中DOM，如选中百度首页的logo

      2、点击DevTools左上角的图标，图标变为蓝色，此时鼠标进入页面区域后，鼠标下面的元素会高亮显示，还是以百度首页logo为例，点击高亮区域即可定位DOM

      3、快捷键Ctrl+F可以打开Elements面板的搜索框，输入想要搜索的页面内容，也可以快速定位到DOM（仅限有文字内容的定位），如在百度首页搜索“百度一下”

二、编辑DOM节点

      双击DOM即可进入可编辑模式，修改的内容在退出编辑状态后实时生效，如下图

      在选中的DOM上右键，可以进行更多的增删改操作，如增加DOM没有的属性、删除当前选择的DOM元素、将DOM作为HTML整段编辑等。所有操作都会在退出编辑状态后在页面中实时更新。

       选择DOM后直接Ctrl+C/Ctrl+V可以复制一个DOM

      常按选中的DOM进行拖拽，还可以更改DOM节点的位置

      细心的同学可以发现，在上面图片的每个选中的DOM后面都有一个“== $0”的标志，这时在console面板中输入$0，是可以输出选中的DOM节点的。

      此外，还可以有个直接在页面中编辑文本的方式，更加方便。只要在控制台console中执行下面任意一行，就可以直接在页面中对文本进行编辑了。

document.body.contentEditable="true";
//or
document.designMode='on';

三、查看CSS

      在styles标签下，可以查看当前选中DOM拥有的CSS样式。当样式很多时，从上到下，样式优先级从高到低。被横线划掉的属性表示被上面优先级更高的属性声明覆盖了。

      点击样式右侧的灰色文字，可以进入Sources面板，查看样式在源文件中的位置，如下图的样式，定义在index源文件的第226行。

      当样式特别多时，可以使用filter来过滤出想要查看的样式。例如在所有的样式中，搜索与color相关的属性，或颜色值设置为fff的样式。

      点击filter后面的“:hover”，可以打开表示元素状态的列表，勾选其中的选项，可以展示出额外的样式。如

      在样式的最下方，还有当前选中DOM的盒子模型，可以清晰的看出DOM的宽高、padding、border和margin并进行修改，如修改span标签的高度，DOM中会自动增加一行样式属性，页面也随之发生了变化

四、编辑CSS

      点击想要编辑的样式，进入编辑模式，可添加、修改或删除任意样式。如添加一个font-size属性，DOM和页面中的内容实时更新，且之前设置过的font-size属性被覆盖。

      点击右侧的“+”，可以给选中的DOM增加规则

      这在动态增加类和伪类时非常方便，如给“百度一下”增加hover样式，可以在页面中实时生效。

      点击右侧的inspector-stylessheet，可以打开自己添加的所有的规则，方便复制粘贴到项目中

      回到Elements面板，鼠标悬浮到任意一个class上，右下角会出现三个点

      鼠标悬浮到三个点上，会出现几个小图标，第一个表示添加文字阴影，第二个是添加盒子阴影，第三个添加文字颜色，第四个添加背景色。点击图标会出现对应的可视化浮窗，可以非常方便的添加对应的样式，大家可以尝试一下。

       最后需要注意的是，Elements面板下进行的所有修改都是不保存的，当页面刷新时，全部恢复到页面的初始状态。