Índice
1. Colorpick Eyedropper
Colorpick Eyedropper é, na minha opinião, a melhor ferramenta de captura de cor do Chrome, por dois motivos principais:
- Zoom ajustável ao movimentar o mouse na tela;
- Ele “trava” quando você aciona o Colorpick, facilitando pegar a cor de um botão no hover (quando você passa o mouse em cima), por exemplo.
Link para download (Chrome Web Store):
https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg
2. BuiltWith
BuiltWith lhe permite enxergar todas as tecnologias utilizadas num aplicativo ou site. Você consegue ver, por exemplo:
- Qual ferramenta de chat o site utiliza
- Qual plataforma foi construído (WordPress, Bubble, Wix…)
- Se for no WordPress, consegue ver os plugins utilizados e o tema
- As linguagens de programação (PHP, Javascript, Jquery…)
- Os gateways de pagamento (PayPal, Stripe…)
- As tags (Facebook Pixel, Google Tag Manager…)
- As ferramentas de anúncios (DoubleClick.net, AdSense…)
- Quais as plataformas de e-mail e formulários de contato (MailChimp, Mailgun)
- E, se você criar uma conta gratuita no Builtwith.com, ainda consegue ver relatórios como, por exemplo: “quantos sites usam o Bubble.is no Brasil”, ou “quais os principais sites que utilizam Shopify no mundo”, enfim, todo tipo de relatório envolvendo cada ferramenta que o BuiltWith conhece.
Link para download (Chrome Web Store):
3. WhatFont
A ferramenta mais simples de busca de fontes que já encontrei.
Basta ativá-la e colocar o mouse em cima do texto que você quer capturar. E se você clicar, ele abre uma tela (como esta acima) para ver mais informações sobre o texto, cor, etc.
Link para download (Chrome Web Store):
https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=pt-BR
4. Full Page Screen Capture
Às vezes você vê aquela página recheada de elementos que você adorou e têm tudo a ver com o aplicativo que você quer construir. Você tira um screenshot com o botão Print Screen do teclado, mas ele só captura o que você está vendo naquele momento, e não o que está no conteúdo abaixo ao rolar o mouse.
Para isso, a extensão Full Page Screen Capture é essencial, pois você consegue capturar a extensão completa da página em uma só imagem.
Link para download (Chrome Web Store):
https://chrome.google.com/webstore/detail/full-page-screen-capture/fdpohaocaechififmbbbbbknoalclacl
[BÔNUS] Chrome Developer Tools (Ferramentas de Desenvolvedor)
O DevTools do Chrome não é uma extensão, mas sim uma ferramenta que já vem junto com o Google Chrome.
Para ativá-la, basta apertar F12 no teclado, ou clicar com o botão direito em um elemento e clicar em inspecionar:
Ao selecionar o elemento que você quer obter as informações e clicar em “Computed” (ao lado de Styles, na parte direita), você consegue absolutamente todas as informações de um elemento na página, embora não de forma tão prática e rápida quanto usando as extensões acima, mas de forma muito mais completa:
E ainda, se você clicar em Styles > :hov > :hover (veja a imagem abaixo), você ainda consegue ver os atributos do elemento quando ele está em modo “hover” (quando você coloca o mouse em cima), ou ainda você pode selecionar qualquer outro estado, como :active, :focus, etc.
