DEV Community


Discussion on: Tools Every Developer Should Know and Use

brandonwallace profile image
brandon_wallace • Edited

Add the VisBug Chrome extension to the list.
Visbug is an open source browser design tool built with JavaScript.

It's features are:

  • Point, click & 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, screen size, etc
  • Make more decisions on the front end of your site/app (a11y, responsive, edge cases, etc)
  • No waiting for developers, just go direct and edit the end state (regardless of framework) and execute or test an idea

There are other great photo websites.

For PNG images with transparency

himanshutiwari15 profile image
Himanshu Tiwari 🌼 Author

Great, definitely will try