Sempre tive bronca com as tecnologias usadas em páginas web (CSS, HTML, JS, ...). Primeiro, pela falta de conformidade das implementações com as especificações (sic. IE), odeio esses "if (IE) { do_it; } else { do_similar; }". Segundo, que o sucesso de uma tecnologia está diretamente ligada à qualidade dos seus editores, compiladores, depuradores, ..., e convenhamos que este nunca foi um ponto forte nestas tecnologias.
Mas, incentivado pelo puxão de orelha do
Carlos, o sucesso do AJAX e os tantos frameworks que abstraem a falta de compatibilidade entre navegadores, e a dica de alguns colegas no
FISL, resolvi investigar o tão comentado
Firebug.
O que é Firebug ?
É uma ferramenta de desevolvimento integrada ao Firefox, que permite editar, depurar e monitorar conteúdo CSS, HTML, JavaScript e DOM utilizados nas páginas web, e tudo isso pode ser feito enquanto você navega pelas páginas.
Instalando.O Firebug é instalado como um
plugin do Firefox, click, click, click, depois de reiniciado o navegador e todas as tuas sessões recuperadas (isso é bala no Firefox), você está pronto para usar o Firebug.
Primeiros passosA tecla F12 é a sua amiga, com ela você abre e fecha a aba do Firebug. Com isso você pode inspecionar, editar, depurar o conteúdo da página que você está navegando
no momento.
Trabalhando com HTML
Nesta aba você pode visualizar o código HTML da página, pode navegar pela sua árvore de elementos e ao selecionar um elemento ele é destacado na página atual.
O contrário também pode ser feito, isto é, clicar em um elemento na página e automaticamente o Firebug seleciona este elemento na árvore.
Muito fácil achar elementos dentro da sua página!
O Firebug apresenta os atributos do elemento selecionado em uma janela lateral, ele permite você alterar estes atributos ou editar diretamente o código HTML. Em todo momento o recurso de auto-complete está disponível =D.
O melhor disso tudo é que as alterações têm efeito instantâneo na página, super importante na abordagem "tentativa-e-erro" para desenvolvimento de interfaces web!
Trabalhando com Layout
Finalmente você vai conseguir entender porque suas caixas não estão alinhadas corretamente!
Basta selecionar o elemento desejado e deixar o Firebug mostrar e medir todos os atributos envolvidos no layout deste elemento.
Tudo isso facilitado com o uso de réguas e linhas guias, ah, lembra do recurso de editar os atributos
on-the-fly?
Use e abuse em conjunto com as teclas direcionais =D!
Monitoramento da Rede
Vitor, lembra quando a página do
Priki demorava mais de 10 segundos para ser carregada? Mole mole com o Firebug.
Para cada arquivo carregado dentro de uma página, ele mostra uma barra com o início e fim do carregamento em relação aos outros arquivos, além do tempo necessário para esta tarefa.
As barras cinzas em claro indicam que o arquivo foi carregado do cache do navegador, não consumindo recursos da rede.
Fácil de achar os gargalos, além de permitir ajustes finos na ordem de carregamento dos arquivos. Recurso muito bom!
O Firebug permite visualizar o conteúdo do
request-response de cada arquivo carregado, além disso, ele permite monitorar as requisições XML utilizadas em páginas AJAX.
Depurando JavaScriptO esquema de depuração do Firebug é outro grande diferencial, de dar inveja a muita IDE com mais anos de estrada.

Permite inserir breakpoint em qualquer linha do código JS, parando a execução quando o depurador passar por aquela linha, além disto, este breakpoint pode conter uma condição de parada.
Tec, tec, tec, tec... a depuração pode ser feita passo a passo, permitindo avaliar expressões, checar e alterar valor das variáveis no contexto.
Bom, se mesmo com este arsenal de depuração, você deseja continuar no bom e velho
"printf", manda ver! O Firebug disponibiliza um console, onde você pode escrever no seu JS comandos de saída.
>>> console.debug("Passei aqui!");>>> console.log("Usuário removido.");>>> console.warning("Conexão não estabelecida.");>>> console.error("Ihhh, fud***");Bom, seguindo na linha redeshop, as ofertas não acabam por aí. Se você precisa achar gargalos no seu JS, o jeito é partir para um profiling. Mas não se preocupe, o danado do Firebug tem! Basta um click para iniciar o profile, outro clique para interromper e apresentar o relatório. Tenta fazer no Eclipse =(

Cara, quanta coisa ainda tem nesta ferramenta! Bom, dormir também é preciso...
ConclusõesApresentei apenas algumas características da ferramenta Firebug, e todos elas de maneira bem superficial. Você pode concluir os benefícios que esta ferramenta pode te trazer ao desenvolver páginas web com CSS, HTML, JavaScript e DOM. Eu não mencionei a parte de desenvolvimento CSS, vou deixar para os designers, nem a aba para exploração de árvores DOM. Mas a filosofia é a mesma, edite on-the-fly.Fiquei realmente impressionado com o poder do Firebug, ousaria em dizer que é uma IDE dentro do Firefox, e vou mais longe, deixa muita IDE aí no mercado no chinelo, se tratando de depuração, profile, logging. Certamente o puxão de orelha valeu a pena, e a minha bronca miou com tecnologias para desenvolvimento de páginas web.
FERRAMENTA ALTAMENTE RECOMENDÁVEL!PS: Nem tudo é maravilha ainda, utilizando a versão 2.0.0.3 do Firefox algumas features do Firebug não funcionaram corretamente, mas de qualquer forma, não arranha nem um pouco o brilho da ferramenta.ReferênciasFirebugFirebug add-onAJAX debugging with FirebugBlog do CarlosA Guide for JavaScript Debugging using Firebug for Firefox