前言
在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
展开很大程度上,帮助我们省去很多不必要的麻烦。