VisBug

visbug.web.app

Featured

4.8(

252 ratings

)

Extension Developer Tools200,000 users

Overview

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

4.8 out of 5
252 ratings
Google doesn't verify reviews. Learn more about results and reviews.

Choudhary Abdullah
Nov 6, 2024

This is useful, but you should try SuperDev Pro (I might be biased 😬).

1 out of 4 found this helpful

Wasana Wickramasinghe
Oct 31, 2024

Great Tool for Quick Design Checks I love using VisBug! It simplifies checking and adjusting spacing, padding, and consistency directly in the browser. It’s user-friendly and saves time, making it great for anyone involved in web design. Highly recommended for effortless on-the-fly edits!

Dianggit Sinewaka Bitotama
Sep 17, 2024

why the tools doesn't show up when I click the visbug, I've already clear the cache and cookies, and also reinstall the visbug, but the visbug tools still doesn't show up.

4 out of 5 found this helpful

Details

Version
0.4.10
Updated
November 20, 2024
Flag concern
Size
5.38MiB
Languages
English
Developer
Website
Email
argyle@google.com
Non-trader
This developer has not identified itself as a trader. For consumers in the European Union, please note that consumer rights do not apply to contracts between you and this developer.

Privacy

The developer has disclosed that it will not collect or use your data.

This developer declares that your data is

Not being sold to third parties, outside of the approved use cases
Not being used or transferred for purposes that are unrelated to the item's core functionality
Not being used or transferred to determine creditworthiness or for lending purposes

Support

Redux DevTools

4.6(726)

Redux DevTools for debugging application's state changes.

Web Developer Checklist

4.2(54)

Analyses any web page for violations of best practices

Motion DevTools

4.5(8)

Inspect, edit and export animations made with CSS and Motion One.

Viewport Resizer: Ultimate Device Emulator & Website Testing Tool

4.2(276)

Emulate devices, resize screens, and perfect your web design effortlessly with this cutting-edge testing and presentation tool.

HTML to Figma - by Builder.io

4.3(46)

Import a web page to Figma layers

Responsive Viewer

4.3(295)

Show multiple screens once, Responsive design tester

CSS Peeper

4.6(361)

Extract CSS and build beautiful styleguides.

Hoverify

4.1(145)

All-in-one browser extension to improve your web dev experience.

CSS Scan

3.8(84)

The fastest and easiest way to check, copy and edit CSS.

Page Ruler

3.9(82)

Measure page elements size in pixel with an easy-to-use ruler.

Dimensions

4.1(455)

A tool for designers to measure screen dimensions

daily.dev | The homepage developers deserve

4.8(2.5K)

Get one personalized feed for all the knowledge you need as a developer.