Uploaded September 2023 | Updated September 2026, 22 minutes ago
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 (youtube.com/@AdamArgyleInk).
🔥 Mastering Prettier & Stylelint Course
Learn everything about best linting tools while supporting CSS Weekly: masteringlinting.com
Use coupon code VISBUG to get an additional 40% off on the already discounted, pre-launch price.
🔗 Links
VisBug on GitHub: github.com/GoogleChromeLabs/ProjectVisBug
VisBug Chrome Extension: chrome.google.com/webstore/detail/visbug/cdockenadnadldjbbgcallicgledbeoc?hl=en
VisBug Playground: https://visbug.web.app/
Subscribe to CSS Weekly Newsletter:
💌 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: twitter.com/CSSWeekly
👉 Instagram: instagram.com/cssweekly
👉 Facebook: facebook.com/CSSWeekly
Keep up to date with what I'm up to:
🔗 Blog: zoranjambor.com
👉 Twitter: twitter.com/zoranjambor
👉 LinkedIn: linkedin.com/in/zoranjambor
- Zoran Jambor
#css #designtools
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 (youtube.com/@AdamArgyleInk).
🔥 Mastering Prettier & Stylelint Course
Learn everything about best linting tools while supporting CSS Weekly: masteringlinting.com
Use coupon code VISBUG to get an additional 40% off on the already discounted, pre-launch price.
🔗 Links
VisBug on GitHub: github.com/GoogleChromeLabs/ProjectVisBug
VisBug Chrome Extension: chrome.google.com/webstore/detail/visbug/cdockenadnadldjbbgcallicgledbeoc?hl=en
VisBug Playground: https://visbug.web.app/
Subscribe to CSS Weekly Newsletter:
💌 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: twitter.com/CSSWeekly
👉 Instagram: instagram.com/cssweekly
👉 Facebook: facebook.com/CSSWeekly
Keep up to date with what I'm up to:
🔗 Blog: zoranjambor.com
👉 Twitter: twitter.com/zoranjambor
👉 LinkedIn: linkedin.com/in/zoranjambor
- Zoran Jambor
#css #designtools
