O Mozilla Firefox sempre foi o meu browser favorito devido a suas inúmeras extensões que me auxiliavam diariamente. Mas quem o usa sabe que, na verdade, ele é um comedor de memória RAM e, ultimamente, ele anda travando mais do que gostaríamos.

Pensando nisso e observando como o Google Chrome tem crescido nas estatísticas de acesso do Google Analytics dos sites que administro, resolvi colocá-lo à prova no meu cenário.

Me surpreendi muito ao acessar a galeria de extensões para desenvolvimento web e ver o grande número de ferramentas que estavam disponíveis. Com isso, seguem as extensões, que, ao meu ver, são mais úteis e interessantes para o meu dia a dia

• 960 Grid System Overlay (Unofficial): É uma ferramenta não oficial para os usuários do sistema de Grid 960 GS. Com ela, você pode visualizar as colunas do site e ver se não ficou nada fora do planejado.
• Awesome Screenshot – Capture & Annotate: Muito útil para fazer um screenshot, que pode ser feito de três maneiras: uma seleção da página, apenas a área visível do seu browser, ou a página inteira. Ele permite, ainda, que você faça pequenas modificações na imagem, como esmaecer alguma área, sinalizar algum lugar que queira dar destaque e até mesmo fazer algum recorte extra. Após editar a imagem, você pode salvá-la em seu computador ou deixa-la online.

• Color Pick: Ferramenta usada para capturar alguma cor que está na tela. Com dois cliques, você consegue recuperar uma cor sem precisar abrir programas de edição de imagem.
• IE Tab Classic: Sim, ainda existem sites que só abrem no Internet Explorer (principalmente os de bancos). Difícil de acreditar, mas é a mais pura verdade. Com essa ferramenta, você “pula” de um navegador para outro em um clique; sem precisar perder tempo abrindo o IE. Ela também é útil para fazer testes rápidos no IE, mas para essa função eu aconselho uma ferramenta separada, chamada IE Tester. Ela é gratuita e tem sido muito útil para mim.
• ImagePropertiesContextMenu: Se você precisa conseguir informações, como tamanho, dimensão, ou URL de uma imagem, esta ferramenta irá lhe ajudar muito. Com um clique do botão direito do mouse em cima da imagem, você verá a opção de inspeção completa.
• IP Addressand Domain Information: Com esta ferramenta, você consegue inspecionar o domínio que está visitando e obter informações, como IP, GeoLocalização (nem sempre muito precisa), whois, e até outros sites que possam estar hospedados no mesmo ip.
• Mobile Resizer: Ferramenta simples, mas útil para conferir se o seu site se “encaixa” em algum dispositivo mobile. Ela basicamente redimensiona o navegador para o tamanho de tela do aparelho selecionado, entre eles temos modelos da Apple, Android e Blackberry.
• Mozbar: Toolbar do site SEOmoz para conseguir algumas informações e métricas de SEO (Page Authority, Page Rank) da página e dos domínio visitados. Ela permite, também, conseguir informações sobre o servidor, como IP e país. Além disso, é bastante útil para fazer análise de metatags e busca de links e palavras-chave dentro do site. Existe uma versão paga, que possui mais funcionalidades.
• Palette for Chrome: Que tal construir uma paleta de cores baseada em uma imagem em apenas alguns segundos? Com esta ferramenta, é fácil. Como não tenho muita afinidade com design e às vezes preciso desempenhar esse papel, essa ferramenta e o colorotate são minhas aliadas para algumas “gambiarras visuais”.
• PerfectPixelbyWellDoneCode: Há certos clientes e designers que conseguem reparar no mínimo pixel fora do lugar, comparando com o layout. Esta ferramenta é para você evitar que isso aconteça. Com ela, é possível criar uma “layer” transparente, com o layout em cima do HTML. Assim, é possível fazer a comparação entre como o site está e como deve ficar.
• ruul. Screenruler: Depois de descobrir que há algo fora do lugar, com ajuda da ferramenta anterior, que tal usar uma régua digital para medir quantos pixels será preciso mexer para que tudo fique em ordem? Ela também possui algumas medidas extras, como espessura de bordas, altura de linha e tamanho de fonte. Podem ser usadas quantas réguas for preciso em uma única página.
• Tape: Algumas vezes, uma simples régua não ajuda a resolver os problemas de medidas em um layout e são necessárias outras ferramentas, como um grid e linhas de marcação. Para esses casos, esta ferramenta é a mais indicada. É um pouco difícil de se acostumar com ela no início, mas depois que se pega o jeito, ela vira uma ferramenta indispensável.
• Web Developer: Esta extensão deve ser a preferida de nove entre dez desenvolvedores web. Ela é uma mão na roda para o uso diário e contínuo. As principais funções são a de manipulação de CSS, forms e imagens, redimensionar o tamanho da tela, validação de CSS e HTML, além de possuir ferramentas, como seletor de cores e uma régua.
• YSlow: Ferramenta de análise das páginas web, para descobrir informações como a velocidade de carregamento, além de fornecer dicas de como melhorar a estrutura da página para que seja carregada mais rápido.
• Firebug Lite for Google Chrome™: Outra ferramenta indispensável. Serve para análise e modificações em tempo real do HTML, JavaScript e CSS do site (essas alterações só duram até a página ser recarregada), além de fornecer um console de erros e monitoramento de JavaScript e uma inspeção do DOM da página.

Ferramenta do desenvolvedor

O Chrome ainda possui uma ferramenta bem semelhante ao Firebug, mas na minha opinião é um pouco inferior. É a “ferramenta do desenvolvedor”, que pode ser habilitada pelo menu Configurações (aquela chave de boca que fica no canto superior direito do navegador), Ferramentas, Ferramentas do desenvolvedor ou pelo atalho Ctrl + Shift + I.

Espero ter ajudado você a optar pelo Chrome no seu ambiente de desenvolvimento. Mas, apesar do crescimento do uso desse browser, lembre-se sempre de testá-lo em vários outros navegadores e sistemas operacionais, isso ajuda muito a não correr o risco de ir apresentar seu trabalho para o cliente e ocorrer algum problema de visualização.