7 extensões do Chrome úteis para Programadores

7 extensões Google Chrome para Programadores

7 extensões do Chrome úteis para Programadores

7 extensões do Chrome úteis para Programadores 1240 700 Bruno Brito

Na semana passada partilhei contigo as minhas extensões preferidas de uso geral para o Chrome, e noutro artigo apresentei 7 aplicações que utilizo diariamente enquanto programo.

Hoje, faz sentido combinar os 2 tópicos: extensões para o Google Chrome que te podem ajudar em várias tarefas de programação!

Neste momento, confesso que ando muito impressionado com o Firefox Quantum: Developer Edition, mas ainda recorro ao Chrome com bastante frequência devido a extensões como aquelas que te vou apresentar de seguida.

Cada extensão torna o browser mais pesado, e ocupa um pouco mais de espaço na barra superior. Como tal, recomendo que as instales mas que as mantenhas desactivadas.

Activa-as apenas quando precisares, recorrendo a outra extensão que também já mencionei no passado – Extensity. Facilita imenso este processo de “ON/OFF”.

E se, como eu, também gostares de usar o browser Opera, não te esqueças que todas estas extensões são também compatíveis com ele.

Vamos então conhecê-las!

#1: One App

One App Webpage

Esta extensão não tem propriamente a ver com código, mas tenho-a sempre activa porque é a minha página pré-definida sempre que abro uma nova tab.

Se programas, provavelmente também visitas sites como o Hacker News, Product Hunt, Designer News ou Github, certo?

O objectivo desta extensão é trazer-te todos os tópicos quentes desses e de outros sites – um verdadeiro “All in One”. Curiosamente, todos eles já faziam parte da minha rotina, pelo que a instalei de imediato. É muito mais fácil estar em cima dos acontecimentos assim.

Podes espreitar o site sem instalar seja o que for, bastando para isso clicar aqui. Como não existe uma app móvel, no telefone e tablet tenho simplesmente esta página definida como a homepage.

#2: CSS Peeper

CSS Peeper

Esta extensão não te vai substituir as visitas às Developer Tools, mas é útil para rapidamente veres a paleta de cores de um site, ou descarregar as várias imagens que lá estão (incluindo SVGs).

Para o download de materiais dá bastante jeito, porque até te cria um ficheiro ZIP com tudo, se quiseres.

#3: FontFace Ninja

FontFace Ninja

No passado utilizava o WhatFont, mas esta extensão é muito mais completa.

Não só detecta todos os tipos de letra utilizados na página em que te encontras, como te oferece um botão para download de qualquer uma, assumindo que são gratuitas. Também as podes gravar como favoritas, se tiveres conta no FontFace Dojo.

Se passares o rato por qualquer texto da página também podes ver o tipo de letra utilizado naquele caso específico, o tamanho e line-height, e ainda a cor. Se clicares nesse mesmo texto, surge uma caixa que te permite escrever o que quiseres e alterar essas propriedades, para conferires o resultado final.

#4: Window Resizer

Window Resizer Google Chrome

É frequente ter de testar um site em várias resoluções, e apesar das Developer Tools serem essenciais para testes em mobile, para testes no desktop prefiro recorrer a esta extensão.

Podes gravar uma combinação de resoluções que queiras utilizar com frequência, ou simplesmente redimensionar o browser, que a extensão indicará o tamanho da janela e do viewport.

Também suporta atalhos de teclado, para o caso de quereres rapidamente alternar entre várias resoluções.

#5: Vimium

O Vim é popular entre programadores, e um dos motivos do seu sucesso é o facto de permitir praticamente tudo sem termos de utilizar o rato. Esta extensão é inspirada nisso mesmo, mas para navegar pela Web.

Podes recorrer a imensos comandos para manteres os dedos no teclado. Eu, habitualmente, só utilizo o J e K para fazer scroll e a possibilidade de navegar para qualquer outra página carregando numa só tecla.

Para esta última funcionalidade, só tens de carregar na tecla F: surge uma etiqueta amarela ao lado de cada link disponível, com o atalho que podes utilizar, como podes ver nesta imagem.

Vimium links

Esta é a lista de atalhos de teclado completa:

Vimium lista de comandos

#6: JSONView

Se já abriste ficheiros JSON no browser, sabes que o output não é bonito. Esta extensão resolve isso, tornando tudo bem legível, com a ajuda de cores e com a possibilidade de minimizares os objectos que não interessarem.

JSON View

Existem várias extensões disponíveis para isto, mas esta é provavelmente a mais popular.

#7: WhatRuns

Para “cuscar” a tecnologia utilizada por cada site, recorro a esta extensão, que é muito similar à Wappalyzer. O WhatRuns identifica milhares de tecnologias, parecendo trazer resultados mais fiáveis que a alternativa.

WhatRuns

Conhece um pouco de tudo: seja uma framework como Bootstrap ou Foundation, um CMS como WordPress ou Joomla, ferramentas para apresentar publicidade, métodos de pagamento, tipos de letra… se for suficientemente popular, o mais provável será detectar sem problemas.


Estas são as minhas “armas secretas” para o Google Chrome. Uma excelente companhia para um editor de texto bem artilhado, seja ele o SublimeText (estas são as minhas dicas) ou o VS Code (idem).

Tens outras extensões que utilizes e que recomendes?

Se quiser entrar em contacto comigo, pode enviar-me um e-mail para [email protected] ou preencher o formulário abaixo.

NOTA: Todos os campos são de preenchimento obrigatório.

7 extensões do Chrome úteis para Programadores

Tempo de Leitura: 4 min
0