VisBug - Visual Prototyping in Browser

Published: 19 September 2023
on channel: CSS Weekly
2,083
84

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


On this page of the site you can watch the video online VisBug - Visual Prototyping in Browser with a duration of hours minute second in good quality, which was uploaded by the user CSS Weekly 19 September 2023, share the link with friends and acquaintances, this video has already been watched 2,083 times on youtube and it was liked by 84 viewers. Enjoy your viewing!