VisBug
使用场景
这款开源浏览器设计工具让设计师和内容创作者可以直接在浏览器中设计和编辑网页，摆脱对开发者的依赖。
核心功能
- 实时编辑和设计：点、点击、移动、调整大小和调整网页元素
- 样式和布局检查：检查样式、间距、距离、可访问性和对齐
- 模拟真实环境：在不同的设备尺寸和状态下设计和测试网页
- 无需等待开发者：直接编辑和测试网页的最终状态，无需等待开发者暴露组件
- 设计工具交互和热键：将设计工具交互和热键带到浏览器中，赋予设计师和内容创作者更多权力
插件截图
插件简介
Open source browser design tools
Open source web design debug tools built with JavaScript: a FireBug for designers.
– Point, click, move, resize & tinker
– Edit or style any page, in any state, like it’s an artboard
– Inspect styles, spacing, distance, accessibility and alignment
– Nitpick layouts & content, in the real end environment, at any device size
– Leverage adobe/sketch skills
– Edit text, replace images
– Design within the chaos: use production or prototypes and the odd states they produce, as artboards and design opportunities
– Design while DevTools simulates 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**
