VisBug - Visual Prototyping in Browser

Рет қаралды 1,716

Күн бұрын

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: 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/P...
VisBug Chrome Extension: chrome.google.com/webstore/de...
VisBug Playground: 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: / cssweekly
👉 Instagram: / cssweekly
👉 Facebook: / cssweekly
Keep up to date with what I'm up to:
🔗 Blog: zoranjambor.com
👉 Twitter: / zoranjambor
👉 LinkedIn: / zoranjambor
- Zoran Jambor
#css #designtools

Пікірлер: 10

@ripcorddesign 10 ай бұрын

Zoran, thank you for introducing us to this helpful tool, and for your great contributions to the CSS/dev community!

@CSSWeekly 10 ай бұрын

Thank you so, so much for your kind words! This means a lot! 🙏

@badcatdesign 10 ай бұрын

VisBug has been my not-so-secret weapon for a few years now. I like its "bug" homage to Firebug.

@CSSWeekly 10 ай бұрын

Yes, Firebug definitively brings out nostalgia. ❤️

@ahmad-murery 10 ай бұрын

This is the first time I hear about VisBug as I am more into coding than visual designing I still prefer playing with CSS directly but it can be a handy tool if it can bundle all the changes I made in one area so I can copy them all. Thanks Zoran!

@CSSWeekly 10 ай бұрын

You're very welcome, Ahmad! 🙂 I guess the target audience for VisBug are mainly designers, but that's a nice use case you shared. 🙏 Did you know about the "Changes" drawer in DevTools, where you can find all the changes you made on the page? I made a short video about this a while ago: kzfaq.infoCJbMbf5t-Cg

@ahmad-murery 10 ай бұрын

@@CSSWeekly Yes I remember that short, I only didn't notice that you can click the copy button to get all changes, Thanks for the reminder Zoran!

@CSSWeekly 10 ай бұрын

You're very welcome, Ahmad! 🙂

@user-pe3sr4ch6t 8 ай бұрын

This is a great tool, thanks for sharing! Quick questions - 1. Is there a way to view the mobile device view without opening up the google inspector? 2. Is there a way to save the change I made within this tool & share it with others?

@CSSWeekly 8 ай бұрын

Thank you so much for your comment, Sarah! 🙏 1. No, I think you will need to open DevTools to see the mobile view. 2. No, as far as I know, you can't share your changes directly from the VisBus. You can potentially grab a screenshot or note the changes you make. It isn't perfect, but it can help. 🙂