VisBug(开源浏览器设计工具) v0.2.30

开源浏览器设计工具插件介绍

用JavaScript构建的开放源码web设计调试工具:设计人员的FireBug。

-简单的点，点击和修补

-编辑或样式的任何页面，在任何状态，就像它的画板

-悬停检查样式，间距，距离，可访问性和对齐

-挑剔的布局和内容，在真实的终端环境，在任何设备大小

-利用adobe/sketch技能

-编辑任何文本，替换任何图像(hi there copywriter, ux writer, pms)

-在混乱中进行设计:使用产品或原型以及它们产生的奇怪状态，作为画板和设计机会

-设计时模拟延迟，i18n，媒体查询，平台约束，cpu，屏幕大小等

-在你的网站/应用程序的前端做更多的决定(a11y，响应，边界情况等)

-无需等待开发者公开他们的乐高，只需直接编辑最终状态(不管框架)并执行/测试想法

给设计师和内容创造者以力量，因为他们现在觉得自己几乎没有，**通过将设计工具交互和热键带到浏览器**

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

- Simple as point, click & tinker

- Edit or style any page, in any state, like it's an artboard

- Hover inspect styles, spacing, distance, accessibility and 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 or prototypes and the odd states they produce, as artboards and design opportunities

- Design while simulating latency, i18n, media queries, platform constraints, CPUs, screensize, etc

- Make more decisions on the front end of your site/app (a11y, responsive, edge cases, etc)

- No waiting for developers to expose their legos, just go direct and edit the end state (regardless of framework) and execute/test an idea

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

开源浏览器设计工具插件安装

1、在打开的谷歌浏览器Chrome的扩展管理器（方法：点击最左侧的三个点，在弹出的菜单中选择【更多工具】-【扩展程序】，或者你可以在地址栏中直接输入chrome://extensions/）

2、进入扩展程序页面后将开发者模式打勾

3、最后将解压出来的开源浏览器设计工具.crx离线文件拖入到浏览器中即可安装添加（安装前可以确认插件版本是否为v0.2.30）

4、如果出现无法添加到个人目录中的情况，可以将crx文件右键，然后选择【管理员取得所有权】，再尝试重新安装

5、安装好后即可使用，安装成功以后该插件会立即显示在浏览器右上角（如果有插件按钮的话），如果没有插件按钮的话，用户还可以通过Chrome扩展管理器找到已经安装的插件。