VisBug - Visual Prototyping in Browser
A hands-on guide to Visbug, a browser extension that will help you prototype in the browser visually as if you were working with a design tool like Figma or Photoshop. VisBug makes it much easier for you to verify design details in production and give feedback to developers.
VisBug was created by Adam Argyle ( / @adamargyleink .
🔥 Mastering Prettier & Stylelint Course
Learn everything about best linting tools while supporting CSS Weekly: https://masteringlinting.com/
Use coupon code VISBUG to get an additional 40% off on the already discounted, pre-launch price.
🔗 Links
VisBug on GitHub: https://github.com/GoogleChromeLabs/P...
VisBug Chrome Extension: https://chrome.google.com/webstore/de...
VisBug Playground: https://visbug.web.app/
Subscribe to CSS Weekly Newsletter:
💌 https://css-weekly.com/
📖 Chapters
00:00 Intro
00:38 What is VisBug
01:57 Install VisBug Chrome extension
02:43 VisBug playground
03:16 Verify alignment using Guides tool
03:51 Navigate elements using keyboard
04:35 Peek into element styes using Inspect tool
05:13 View contrast info using Accessibility tool
05:43 Rearrange elements using Move tool
06:19 Hide outlines and guides on the fly
06:35 Tweak margin & padding
07:02 Select multiple elements
07:56 Quick overview of other VisBug tools
08:40 Find elements using Search tool
09:11 Practical example — Tweaking masteringlinting.com
10:39 View local style modifications & inline styles
10:59 How to work with images in VisBug
11:50 Mastering Prettier & Stylelint
12:27 Conclusion — Why should you use VisBug
Keep up-to-date with CSS Weekly:
👉 Twitter: / cssweekly
👉 Instagram: / cssweekly
👉 Facebook: / cssweekly
Keep up to date with what I'm up to:
🔗 Blog: https://zoranjambor.com
👉 Twitter: / zoranjambor
👉 LinkedIn: / zoranjambor
Zoran Jambor
#css #designtools