Ter um arsenal de ferramentas poderoso é um dos diferenciais para quem busca cada vez mais velocidade e qualidade no seu trabalho. O editor de código é, talvez, a mais importante dessas ferramentas. Outra que também não fica para trás são nossos navegadores. Passamos boa parte do nosso dia neles, portanto é importante escolher as melhores extensões.

No artigo de hoje, listamos diversas extensões específicas para o navegador mais popular na atualidade, o Google Chrome, mas que podem ser facilmente encontradas em outros navegadores modernos. Elas vão salvar seu dia e melhorar muito seu fluxo de trabalho com relação à front-end, performance, mobile, acessibilidade, design, entre outras coisas.

Front-end

1. JSON View

Nada pior do que abrir aquele JSON e dar de cara com milhares de caracteres desalinhados, sem indentação alguma. Essa extensão organiza qualquer JSON, tornando-o legível para um ser humano.

2. W3C Validator

Agora você não tem mais desculpa para não validar sua página. Basta entrar em qualquer site e clicar no botão que ativa a extensão, automaticamente seus arquivos HTML e CSS são enviados para o validador da W3C.

3. jQuery API Browser

Não lembra exatamente como funciona aquela API do jQuery? Sem problemas, é só digitar o nome do método na caixa de busca da extensão que são carregadas todas as informações sobre ele, sem você ir até a documentação para uma consulta rápida.

4. Frameworks

Quer saber quais frameworks o site que você está navegando utiliza? Essa extensão mostra pra você.

Mobile

5. Window Resizer

Redimensione a janela do seu navegador para testar como seu site se comporta em cada tamanho. Excelente para testes de Responsive Design.

6. Chrome to Phone

Está navegando e gostaria de ver na hora como aquele site se comportaria no seu telefone? Essa extensão faz uma conexão com seu telefone e abre a URL atual do seu navegador no desktop para seu navegador no celular.

7. Ripple

Um emulador completo que provê funcionalidades para diversas plataformas, especialmente para quem está desenvolvendo usando WebWorkers ou PhoneGap. Você consegue simular eventos de mudança da orientação da tela, acelerômetro, entre muitos outros.

Clássicos

8. Firebug

A extensão mais tradicional do Mozilla Firefox para quem não se acostumou com a Developer Tools do Chrome.

9. Web Developer

Um conjunto enorme de funcionalidades que te ajudam no processo de desenvolvimento.

Acessibilidade

10. Chrome Vox

Um leitor de tela excelente para testar como suas páginas são acessadas por aqueles que possuem deficiências visuais.

11. eScanner

Agora você também não tem mais desculpa para não validar seu site segundo as recomendações do Modelo de Acessibilidade de Governo Eletrônico – e-MAG.

Github

12. Octofication

Receba as notificações dos repositórios que você acompanha direto no navegador.

13. Diff for Gist

Uma extensão que vem para suprir a deficiência do Gist em não exibir diferenças entre cada revisão do arquivo.

Design

14. ColorZilla

Achou uma cor legal enquanto navegava? Agora você não precisa mais dar printscreen e ir até o Photoshop para buscar a cor. Esse conta gotas agiliza sua vida.

15. WhatFont

Encontrou aquela fonte perfeita enquanto navegava por aí? Essa extensão te diz exatamente qual é o nome e as características de estilo dela.

Workflow

16. LiveReload

Chega de dar F5 na sua página para ver as mudanças que você realizou no código. Essa extensão economiza muitas teclas nesse workflow eterno de troca de janelas.

17. Tincr

Você continua editando as propriedades no Developer Tools e voltando para o seu código para replicar as mudanças? Com o Tincr, qualquer alteração feita no CSS através do Developer Tools é automaticamente salva no seu arquivo localmente. Parece mágica!

Performance

18. PageSpeed

Verifique cada aspecto do seu site de acordo com as diretrizes de performance propostas pela Google.

19. YSlow

A famosa ferramenta da Yahoo! para verificar como anda seu site em relação à performance.

20. Speed Tracer

Analise as métricas de como anda o tempo de execução do seu JavaScript, a velocidade dos seus seletores CSS, a integridade das suas requisições HTTP, entre outros.

Outros

21. Markdown Here

Viciado em Markdown como eu? Com essa extensão você consegue escrever até e-mail com ele! Comece a redigir seu texto normalmente usando a sintaxe do Markdown depois selecione o texto e clique em “Markdown here” que seu texto é convertido em HTML e renderizado bonitinho no seu e-mail por exemplo.

22. Right Click Lorem Ipsum

Um Lorem Ipsum a dois cliques de distância.

23. PerfectPixel

Excelente extensão para verificar como anda a implementação do seu layout Pixel Perfect.

Bônus

Sentiu falta de alguma extensão? Comente!

Ou que tal construir sua própria? É muito simples, siga os passos desse artigo: Criando extensão para Google Chrome.