4 Extensões Essenciais do Chrome (para ajudar a pegar informações de uma página)



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):

https://chrome.google.com/webstore/detail/builtwith-technology-prof/dapjbgnjinbpoindlpdmhochffioedbn?hl=pt-BR


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.

Tudo que você precisa saber sobre Desenvolvimento Visual de Aplicativos em uma aula Online e 100% Gratuita:

Renato Asse

Renato Asse

Sem Codar é onde empreendedores aprendem a criar aplicativos web e mobile sem programação ou código. Acesse nosso Canal no YouTube para ver os tutoriais e dicas de desenvolvimento.

Posts relacionados

INSCREVA-SE

Cadastre-se gratuitamente para receber dicas, tutoriais e novidades sobre o mundo do desenvolvimento sem código:

COMPARTILHE

Share on facebook
Share on whatsapp
Share on twitter
Share on email

FIQUE POR DENTRO DAS NOVIDADES

Cadastre-se Gratuitamente