Open source browser design tools

Latest Version

Version
0.4.10
Update
November 20, 2024
Size
5.38MiB
Developer
visbug.web.app
Category
Users
200,000+
Rating
4.81349 ★
Manifest Version
3
Web Store Status
Languages Support
English
See more
Permissions
ActiveTab
ContextMenus
Scripting
Storage
See more

VisBug Extension

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

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "name": "VisBug", "version": "0.4.10", "description": "Open source browser design tools", "manifest_version": 3, "icons": { "128": "icons/visbug.png" }, "permissions": [ "activeTab", "contextMenus", "scripting", "storage" ], "background": { "service_worker": "visbug.js", "type": "module" }, "action": { "default_title": "Click or press Alt+Shift+D to launch VisBug", "default_icon": { "128": "icons/visbug.png" } }, "web_accessible_resources": [{ "resources": [ "tuts/*.gif", "toolbar/*" ], "matches": [""] }], "commands": { "_execute_action": { "suggested_key": { "windows": "Alt+Shift+D", "mac": "Alt+Shift+D", "chromeos": "Alt+Shift+D", "linux": "Alt+Shift+D" } } }}
Read more

Similar Extensions

icon

HTML to Figma - by Builder.io Extension · Productivity 200,000+ 46 ★ 343KiB

icon

Responsive Viewer Extension · Developer Tools 200,000+ 298 ★ 639KiB

icon

CSS Peeper Extension · Developer Tools 200,000+ 363 ★ 279KiB

icon

Hoverify Extension · Developer Tools 200,000+ 145 ★ 14.54MiB

icon

CSS Scan Extension · Developer Tools 200,000+ 84 ★ 1.41MiB

icon

Page Ruler Extension · Productivity 200,000+ 83 ★ 256KiB

icon

Dimensions Extension · Developer Tools 200,000+ 454 ★ 17.28KiB

icon

daily.dev | The homepage developers deserve Extension · Developer Tools 200,000+ 2460 ★ 2.28MiB

icon

Redux DevTools Extension · Developer Tools 200,000+ 726 ★ 1.2MiB

icon

Web Developer Checklist Extension · Developer Tools 200,000+ 54 ★ 32.65KiB

icon

Motion DevTools Extension · Developer Tools 200,000+ 8 ★ 788KiB

icon

Viewport Resizer: Ultimate Device Emulator & Website Testing Tool Extension · Developer Tools 200,000+ 277 ★ 143KiB

icon

Web Vitals Extension · Developer Tools 200,000+ 43 ★ 398KiB

icon

Sizzy Extension · Developer Tools 200,000+ 57 ★ 40.47KiB

icon

Responsively Helper Extension · Developer Tools 200,000+ 12 ★ 146KiB

icon

CSSViewer Extension · Developer Tools 200,000+ 371 ★ 301KiB

icon

OctoLinker Extension · Developer Tools 200,000+ 110 ★ 184KiB

icon

30 Seconds of Knowledge Extension · Developer Tools 200,000+ 88 ★ 3.57MiB

icon

Amino: Live CSS Editor Extension · Developer Tools 200,000+ 453 ★ 1.45MiB

icon

DevTools Author Extension · Developer Tools 200,000+ 117 ★ 377KiB

icon

Apollo Client Devtools Extension · Developer Tools 200,000+ 266 ★ 490KiB

icon

LocatorJS Extension · Developer Tools 200,000+ 64 ★ 190KiB

icon

File Icons for GitHub and GitLab Extension · Developer Tools 200,000+ 48 ★ 460KiB

icon

Designer Tools Extension · Developer Tools 200,000+ 227 ★ 987KiB

User reviews

icon

Mir T (ID: 000000089bb20b4a) Voted 5 ★ - Updated 07/25/2023 Exactly what I needed for work! Thanks!

icon

Andrés Andrade (ID: 000000501f7eb110) Voted 5 ★ - Updated 06/01/2023 What a beautiful and useful tool, love it!

icon

Default Cube (ID: 000000d85c66efbe) Voted 5 ★ - Updated 03/31/2023 nice extension

icon

Moutasem Abdullatif (ID: 0000009e0161a9cc) Voted 5 ★ - Updated 03/30/2023 amazing

icon

Профупаковка Google Analytics (ID: 000000cb9b969340) Voted 5 ★ - Updated 03/22/2023 Супер инструмент!