共计 1357 个字符，预计需要花费 4 分钟才能阅读完成。
作为前端开发者置信必定有遇到过以下场景：
- 看到一个网站某个模块不错的款式成果想要看 CSS 代码
- 开发过程中调整款式，如字符溢出，对齐，字体大小色彩之类
- 更改网站数据或款式截图分享
在开发过程中，咱们通常会遇到须要一直调整代码能力达到预期成果的状况。如果是线上网站的状况，个别会简略粗犷地应用 F12 来查看代码或更改数据。但明天我发现了一个十分不错的 Chrome 插件，能够提供更好的解决方案。我亲自试用了一下，感觉十分棒。在本文中，我将分享这个插件的具体性能，看看是否正好可能解决你的问题。
这个插件的名称是：VisBug，下载安装地址：https://chrome.google.com/webstore/detail/visbug/cdockenadnad…，官网体验地址：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）
