VisBug

VisBug插件简介

VisBug插件描述

Open source web design debug tools built with JavaScript: a FireBug f designers.

 Simple as point, click & tinker
 Edit  style any page, in any state, like its an artboard
 Hover inspect styles, spacing, distance, accessibility  alignment
 Nitpick layouts & content, in the real end environment, at any device size
 Leverage adobe/sketch skills
 Edit any text, replace any image (hi there copywriters, ux writers, pms)
 Design within the chaos: use production  prototypes  the odd states they produce, as artboards  design opptunities
 Design while simulating latency, i18n, media queries, platfm constraints, CPUs, screensize, etc
 Make me decisions on the front end of your site/app (a11y, responsive, edge s, etc)
 No waiting f developers to expose their legos, just go direct  edit the end state (regardless of framewk)  execute/test an idea

Give power to designers & content creats, in a place where they currently feel they have little to none, **by bringing design tool interactions  hotkeys to the browser**
                                

VisBug插件离线安装方法

1.首先用户点击谷歌浏览器右上角的自定义及控制按钮，在下拉框中选择设置。

2.在打开的谷歌浏览器的扩展管理器最左侧选择扩展程序或直接输入：chrome://extensions/

3.找到自己已经下载好的Chrome离线安装文件xxx.crx，然后将其从资源管理器中拖动到Chrome的扩展管理界面中，这时候用户会发现在扩展管理器的中央部分中会多出一个”拖动以安装“的插件按钮。

4.下载 VisBugChrome插件v0.3.55版本到本地。

5.勾选开发者模式，点击加载已解压的扩展程序，将文件夹选择即可安装插件。

注意：最新版本的chrome浏览器直接拖放安装时会出现“程序包无效CRX-HEADER-INVALID”的报错信息，参照这篇文章即可解决