前言：
作为web网页开发者，我们在日常开发过程中经常需要在控制台查看和修改元素的各种属性，以达到我们想要的各种效果。但这种方法往往效率低，而且效果不够直观。今天分享一款浏览器插件VisBug，可以帮助我们更快的查找元素，检查元素属性、间距，调整位置、颜色、字体大小、阴影等等，极大提升我们的开发体验。
Github地址
调起插件之后，左侧栏出现各种工具选项。
1、首先第一项测量元素之间间距，选中元素之后，移动鼠标可以显示各种元素和被选元素之间的距离。
2、第二项显示被选元素的css属性
3、第三项显示被选元素的视觉属性
4、第四项选中元素之后，可以按左键拖拽或者键盘方向键移动
5、第五项和第六项分别显示元素的外边距和内边距
6、第七项显示/修改元素的display属性
7、第八项可以修改元素的字体颜色和背景颜色
8、第九项如果元素有阴影，那么该选项可以调节阴影细节
9、第十项可以调整元素位置，任意拖拽
10、第十一项可以调整字体大小、字体间距、行距
11、第十二项可以编辑元素（删除添加文字或者图片）
12、第十三项搜索页面元素（支持标签、class、id等选择器）
结语：
这里展示的只是VisBug一部分用法，配和键盘操作，可以有更多的功能