VisBug:助力前端开发的浏览器插件

作为前端开发者相信肯定有遇到过以下场景：

• 看到一个网站某个模块不错的样式效果想要看CSS代码
• 开发过程中调整样式，如字符溢出，对齐，字体大小颜色之类
• 更改网站数据或样式截图分享

在开发过程中，我们通常会遇到需要不断调整代码才能达到预期效果的情况。如果是线上网站的情况，一般会简单粗暴地使用 F12 来查看代码或更改数据。但今天我发现了一个非常不错的 Chrome 插件，可以提供更好的解决方案。我亲自试用了一下，感觉非常棒。在本文中，我将分享这个插件的具体功能，看看是否正好能够解决你的问题。

这个插件的名称是：「VisBug」，下载安装地址：「https://chrome.google.com/webstore/detail/visbug/cdockenadnadldjbbgcallicgledbeoc」， 官网体验地址：https://visbug.web.app。

VisBug 是一款由 Adam Argyle 所创作的用语 Web 开发的浏览器扩展，它可以在 Google Chrome 和 Firefox 浏览器中使用。VisBug 的主要目的是为 Web 开发者提供一种更加直观、易用和有趣的方式来开发和设计网站。VisBug 与浏览器的开发者工具类似，但提供了更多的可视化工具，可以在页面上实时编辑 CSS 样式、HTML 元素和布局，以及检查和改进页面的可访问性和性能。

简单来说就是插件提供了一种更直观的方式来编辑网页，能够很轻松的进行设计和调试，包括「移动、调整大小、编辑文本，修改颜色、实施预览效果等」，能够提高有强迫症同学日常反复调整的效率。

安装完成后打开对应想要调试的网站，点击插件后会出现一个左侧栏，包含各种工具选项。

VisBug 的主要功能包括以下功能点，以下说明顺序和和上面功能点截图顺序一一对应：

1、测量元素之间的间距，选中元素后移动鼠标可以显示各种元素和被选元素之间的距离，就像平时查看设计图一样。

2、被选元素CSS样式查看，hover时会跟随鼠标移动变化，需要复制或停留的点击该元素即可，该弹窗不会消失可以进行复制操作，直到点击下一个元素关闭窗口。

3、显示被选元素的视觉相关属性，这个感觉比较实用的数据不多。

4、选中元素之后，可以按左键或者方向键盘拖拽

5、显示元素的外边距（margin），可通过键盘调整大小。

键盘调整的操作方式，后续相关功能点也有支持，具体的操作方式可以hover对应的功能点查看。

6、显示元素的内边距（padding），和外边距一样。

7、基于flex布局调整元素的样式，通过键盘调整非常方便。

8、调整元素的字体颜色和背景颜色，选中元素后修改调色板即可。

9、如果元素有阴影，则可以调节阴影相关细节。

10、调整元素位置，任意拖拽

11、调整字体大小、字体间距、行距

12、编辑元素（删除添加文字或者图片），对于要更改数据的场景就非常方便了。

13、搜索页面元素（支持标签、class、id等选择器）

主要功能点就介绍完了，有兴趣的同学可以安装体验一下。VisBug 插件可以帮助开发人员更加轻松地进行 Web 开发和设计，并提高他们的创造力和生产力。如果您是一名 Web 开发者或设计师，VisBug 可以是您的一款不可或缺的工具。

看完本文如果觉得有用，记得点个赞支持，收藏起来说不定哪天就用上啦～

「专注前端开发，分享前端相关技术干货，公众号：南城大前端（ID: nanchengfe）」