
É incrível como o Firefox pode transformar-se em uma verdadeira suíte de desenvolvimento para páginas web. Leia essa postagem e descubra como ganhar tempo com as facilidades que os complementos oferecem
A página de complementos do Firefox possui mais de 800 (oitocentas) opções relacionadas ao desenvolvimento web. Extraímos o que consideramos a elite dos complementos voltados para a otimização do seu tempo na codificação de páginas na web.
Fizemos uma tradução livre das descrições dos complementos. Elas foram retiradas da excelente postagem 15 Helpful In-Browser Web Development Toolsescrita por Jacob Gube no site Smashing Magazine. Essa postagem contém muito mais dicas (em inglês) sobre 15 complementos para desenvolvedores em diversos navegadores.
A página de comentários está aberta para que você possa complementar nosso texto com sugestões. Optamos por colocar somente complementos que utilizamos em nosso cotidiano.
Firebug

Firebug é uma extensão para o navegador Mozilla Firefox que permite abrir e inspecionar HTML, CSS, Document Object Model (DOM) e JavaScript. Apesar dele possuir fortes recursos, é mais conhecido pela revolucionaria maneira que os desenvolvedores manipulam um código em JavaScript.
Por exemplo, antes do Firebug muitos desenvolvedores usavam a função alert() para ver o que a variável continha ou para encontrar em que lugar da linha havia uma quebra no código. Com o Firebug habilitado, você encontrará especificamente qual é o erro e em de qual linha ele vem. Firebug é uma excelente ferramenta para os desenvolvedores de aplicações em AJAX porque ele deixa você explorar e realizar edições on-the-fly (instantâneas) sobre o DOM para ver o que acontece na manipulação dos elementos de uma página Web após um ação de um usuário.
Ao lado dessas populares funcionalidades para JavaScript e DOM, firebug também pode registrar atividades com relação ao acesso à página que permitem ver detalhes resultantes de conecções HTTP, inspecionar e editar HTML on-the-fly (instantaneamente), debugar (corrigir) o código e visualizar seu CSS.
Web Developer

A extensão Web Developer (para Firefox, Flock e SeaMonkey navegadores Web) é um complemento que adiciona uma barra de ferramentas com um menu de opções para corrigir e inspecionar páginas Web. Ele possui muitas utilidades, e a minha favorita é a opção View CSS Information (CSS; View Style Information, or Control + Shift + Y no Windows) que faz um elemento da página clicável e mostra o seu seletor CSS. Ela é útil para explorar e entender largamente CSS arquivos e projetos que você não está familiarizado. (como por exemplo, um novo Sistema de Gerenciamento de Contéudo em código aberto).
Para sua comodidade ele vem com opções para validação de sintaxe através dos serviços Web famosos, como W3C’s CSS Validator e HiSoftware’s Web Content Accessibility Report. Também possui muitas outras ferramentas úteis, tais como desabilitar opções para CSS, JavaScript e imagens, para testar gradativamente o seu impacto na apresentação do código; um Forms menu com opções para trabalhar com formulários web; Display Div Order e Display Block Size, que são opções para ajudá-lo a visualizar o layout; e muito mais.
YSlow

YSlow é uma extensão do Firefox criada pelos desenvoledores do Yahoo!. Ela é integrada ao Firebug (por isso é necessário ter esse complemento ativo para fazê-lo funcionar). YSlow analisa o desempenho da apresentação da página e o seu uso mais comum é colocar uma nota de acordo com uma letra. (o melhor desempenho recebe A e o pior recebe F) para cada uma das Best Practices for Speeding Up Your Web Site (em livre tradução, melhores práticas para acelerar seu website).
YSlow também permite inspecionar em detalhes os elementos essenciais para uma alto desempenho do website. Por exemplo, o Stats View lhe dá o tamanho total de uma página web e um sumário de ítens que são carregados quando a é requisitada (i.e style sheets, arquivos JavaScript, Objetos em Flash e imagens), então com isso você pode verificar os gargalos que causam a lentidão no carregamento.
A ferramenta Components permite visualizar cada um dos companentes da página dentro de uma tabela. Nela você poderá visualizar atributos como tamanho, data de expiração (para cada arquivo em cache), se ele usa compressão pelo lado do servidor (Gzip) e resposta de tempo (quanto tempo o componente leva para carregar).
ColorZilla

ColorZilla é um simples – mas muito útil – complemento para Firefox. Se você já procurou determinar quais cores são usadas em uma página web, ColorZilla é a ferramenta para esse serviço. Ela adiciona um ícone contra-gotas no canto inferior-esquerdo do navegador.
Ao clicar no contra-gotas os objetos da página tornam-se selecionáveis, e ao clicar em um deles são demonstrados os valores hexadecimal, RGB e matriz/saturação daquela área. Antes do ColorZilla, erá necessário capturar uma tela da página para dentro de um editor gráfico como Photoshop e então utilizar a ferramenta contra-gotas no editor para modelar as cores. ColorZilla poupa seu tempo e agiliza o processo de modelagem das cores.
FireShot

FireShot é uma ferramenta que permite realizar cópias de tela e elaborar anotações, edições, organizá-las e exportá-las. Utilizar Screen-grabbing (fazer a cópia tela integralmente) é uma atividade comum para desenvolvedores web para documentar resenhas de aplicações web e compartilhá-las com clientes, e FireShot lhe dá uma condições de administrar e agilizar esse tipo de necessidade.
FireFTP

FireFTP é grátis, multi-plataforma e serve para envio e recebimentos de arquivos. Ele oferece diversas vantagens sobre outras aplicações FTP, que possuem o pré-requisito de operar como um sistema independente. O que é excepcional sobre FireFTP é que apesar de ser uma aplicação dentro de um navegador (e grátis), ele tem todos os recursos que você poderia esperar de um programa FTP convencional, tais como suporte à protocolos de segurança (SSL, TLS, SFTP), um recurso para sincronizar o envio de arquivos local e remotos, e o diretório comparativo para ajudar a ver quais arquivos estão perdidos ou as diferenças entre dois diretórios e muito mais.
Qual desses você utiliza?
Se tivesse que eleger o mais útil diria que é o Firebug. Um detalhe importante sobre esse complemento é que ele agrega uma quantidade enorme de outros complementos consigo. É uma verdadeira suíte de desenvolvimento que está apenas no começo. Além disso, para quem quer realmente aprender desenvolvimento web o projeto é uma verdadeira escola de boas práticas, eu assinei a lista no Google por um bom tempo é uma experiência que vale a pena.
Enriqueça essa postagem, relate sua experiência nos comentários.