Chrome 操作指南——入门篇（十三）element 小技巧

前言

在 element 面板我们往往都是选择相应节点，对样式进行调试。不过，在这个面板中，其实还藏着一些小技巧的，让你的调试更加方便。下面我就给大家把我所收集的一一介绍下。

快速插入样式

当把鼠标放到相应的样式选择器上时，右下角会出现一个⋮图标，移过去或出现三个按钮，可以对样式进行快速的添加。

• Add text-shadow：添加字体阴影。

text-shadow: 0 0 black;

• Add box-shadow：添加盒子阴影。

box-shadow: 0 0 black;

• Add color：添加字体颜色。

color: black;

• Add background-color: 添加背景色。

 background-color: white;

• Insert Style Rule Below：插入样式选择器。

一键隐藏 DOM 节点

可能有些时候，我们想隐藏页面的一部分内容，比如说截图什么的。这个时候只需要按下h键，就可以一键隐藏，在按下就会显示。

shadow editer（阴影编辑器）

当鼠标靠近box-shadow 或者 text-shadow旁的阴影方形图标时，点击，即可打开阴影编辑器，可以快速的对阴影进行调整。

快速展开 dom 节点

当 elements 面板中，选择的节点层级较多时，我们一个一个的点击展开是比较繁琐的，我们可以右键选择expand recursively命令进行一键展开。

尤其在用一些 ui 组件库的时候，dom 层级结构就比较深，通过 expand recursively 展开很大程度上，帮助我们省去很多不必要的麻烦。