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