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
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
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
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
É 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.
Esta é a lista de atalhos de teclado completa:
#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.
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.
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?
