Desenvolvimento

3 dez, 2012

23 extensões indispensáveis para desenvolvedores web

100 visualizações
Publicidade

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.

JSON View

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.

W3C Validator

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.

jQuery API Browser

4. Frameworks

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

Frameworks

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.

Window Resizer

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.

Chrome to Phone

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.

Ripple

Clássicos

8. Firebug

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

9. Web Developer

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

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.

Chrome Vox

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.

eScanner

Github

12. Octofication

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

Octofication

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.

Diff for Gist

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.

ColorZilla

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.

WhatFont

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.

LiveReload

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!

Tincr

Performance

18. PageSpeed

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

Page Speed

19. YSlow

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

YSlow

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.

Speed Tracer

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.

Markdown Here

22. Right Click Lorem Ipsum

Um Lorem Ipsum a dois cliques de distância.

Right Click Lorem Ipsum

23. PerfectPixel

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

PerfectPixel

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.