FireBug for designers › Edit any webpage, in any state https://a.nerdy.dev/gimme-visbug
Open source web design debug tools.
- Point, click & tinker
- Hold shift and multi-select
- Edit any page in any state
- Hover inspect styles, accessibility and alignment
- Nitpick layouts & content, in the real end environment, at any device size
- Leverage design tool nudging skills
- Edit any text
- Replace image(s)
- Traverse DOM like groups & layers in Sketch
- Design within the chaos of production or prototypes and the odd states they produce
- Bugs become design opportunities
- Design while simulating: latency, translation, media queries, platform constraints, orientation, 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 power within the web project they have today, by bringing design tool interactions to the browser.
Check out the list of features me and other's are wishing for. There's a lot of fun stuff planned or in demand. Cast your vote on a feature, leave some feedback or add clarity.
Let's do this design community, I'm looking at you! Make a GitHub account and start dreamin' in the issues area! Help create the tool you need to do your job better.
- A competitor to design authoring tools like Figma, Sketch, XD, etc; it's a complement!
- Something you would use to start from scratch
- A design system recognizer, enforcer, enabler, etc.. but it is a design system leverager!
- An interaction prototyping tool, you need to produce the states for VisBug to design against
Add to your browser
Check the Wiki
Master List of Keyboard Commands
Open Feature Requests
Chat on Gitter
Chat on Spectrum
Load VisBug from a CDN
VisBug是谷歌开源的网页设计分析调试 Chrome 扩展插件。VisBug类似Firebug，不允许开发者修改网站的源代码，而是允许网页设计师直接在浏览器对 Web 页进行设计调整。软件遵守Apache 2.0开源协议。
[repo owner=”GoogleChromeLabs” name=”ProjectVisBug”]