What is VisBug?

VisBug is a Chrome extension developed by https://visbug.web.app, and its main feature is "Open source browser design tools".

Extension Screenshots

Download VisBug Extension CRX File

Download VisBug extension files in crx format, manually install Chrome extensions in the browser, or share the crx files with friends to easily install Chrome extensions.

Extension Usage Instructions

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**

Extension Basic Information

Name	VisBug
ID	cdockenadnadldjbbgcallicgledbeoc
Official URL	https://chromewebstore.google.com/detail/visbug/cdockenadnadldjbbgcallicgledbeoc
Description	Open source browser design tools
File Size	5.35 MB
Installation Count	187,716
Current Version	0.3.55
Last Updated	2022-10-21
Publish Date	2020-06-26
Rating	4.82/5 Total 225 Ratings
Developer	https://visbug.web.app
Email	[email protected]
Payment Type	free
Extension Website	https://github.com/GoogleChromeLabs/ProjectVisBug
Help Page URL	https://github.com/GoogleChromeLabs/ProjectVisBug/issues
Supported Languages	en
manifest.json
{ "update_url": "https:\/\/clients2.google.com\/service\/update2\/crx", "name": "VisBug", "version": "0.3.55", "description": "Open source browser design tools", "manifest_version": 2, "icons": { "128": "icons\/visbug.png" }, "permissions": [ "activeTab", "contextMenus", "storage" ], "background": { "persistent": true, "scripts": [ "visbug.js", "contextmenu\/launcher.js", "contextmenu\/colormode.js", "contextmenu\/colorscheme.js" ] }, "browser_action": { "default_title": "Click or press Alt+Shift+D to launch VisBug", "default_icon": { "128": "icons\/visbug.png" } }, "web_accessible_resources": [ "tuts\/", "toolbar\/" ], "commands": { "_execute_browser_action": { "suggested_key": { "windows": "Alt+Shift+D", "mac": "Alt+Shift+D", "chromeos": "Alt+Shift+D", "linux": "Alt+Shift+D" } } } }