A extensão que todo Front End deveria conhecer
2 min readJun 23, 2020
Give power to designers & content creators power within the web project they have today, by bringing design tool interactions to the browser.
Esses dias me deparei com a extensão VisBug achei tão incrível que resolvi compartilhar, ela trás diversos design debug tools para o navegador como:
- Point, click & tinker
- Hold shift and multi-select
- Edit any page in any state
- Hover inspect styles, accessibility and alignment
- Nitpick layouts & content, in the real end environment, at any device size
- Leverage design tool nudging skills
- Edit any text
- Replace image(s)
- Traverse DOM like groups & layers in Sketch
- Design within the chaos of production or prototypes and the odd states they produce
- Bugs become design opportunities
- Design while simulating: latency, translation, media queries, platform constraints, orientation, screensize, etc
- Make more decisions on the front end of your site/app (a11y, responsive, edge cases, etc)
Com tudo isso de ferramentas parece que é difícil de usar, certo? Errado!
o VisBug tem uma feature bem interessante que explica detalhadamente cada ferramenta disponível na extensão:
E sabe qual é a melhor parte dessa extensão? Ela é open source, seu código fonte está no GitHub e você pode ver através desse link.
Obrigado pela leitura, até mais! ❤
