FireBug: Porque tempo é dinheiro!

Em tempos de pouco Seaside, a gente tem que se virar pra aumentar a produtividade ao escrever códigos de client-side.

Quem de nós desenvolvedores, nesses últimos 10 anos, não sofreu de sérias cefaléias depois de algumas horas de depuração braçal(vulgo “alert-debugging“) de código JavaScript?

Que atirem a primeira pedra!

Já faz algum tempo que o FireBug se tornou uma ferramentinha essencial no meu toolset de desenvolvedor web!

O FireBug é um plugin do Firefox até completinho, que permite editar folhas de estilo, debugar JavaScripts, monitorar o tráfego de rede gerado por uma página, etc; facilitando em muito o desenvolvimento de interfaces um pouco mais interativas, com scripts de complexidade razoável.

Listei abaixo alguns dos aspectos que mais me chamam a atenção no Firebug:

Suporte à JavaScript
A economia de tempo para quem não está acostumado a ter um debugger Javascript é ridiculamente insana!

O Firebug, por meio das funções de “Step Over“, “Step Into” e “Step Out” lhe permite controlar a execução das instruções JavaScript manualmente. Essas funções trabalhando em conjunto com Breakpoints e expressões de “Watch”(que permitem monitorar o valor de uma determinada expressão em um dado momento da execução) transformam o Firebug em uma poderosíssima ferramenta de depuração.

Na aba “Script” há um painel que ao longo da execução, vai listando(conforme os filtros que você selecionar) as variáveis definidas no script em execução. Poupa nosso trabalho de ter que adicionar uma expressão de “Watch” para cada variável declarada no script.

Além disso, na aba “Console” você tem um shell interativo que poderá ser muito útil no desenvolvimento também! Neste shell, você pode executar pequenas instruções JavaScript via command line que podem lhe dar uma melhor idéia do que está em memória em client-side, percorrer a estrutura DOM de uma página, testar a execução de funções JavaScript anteriormente definidas, definir novas funções/objetos/variáveis, e coisas do tipo. Já não dá pra ficar sem essas coisas!

Monitoramento de tráfego de rede
Pra quem trabalha muito com Ajax(ou melhor, requisições via XMLHttpRequest em geral), essa feature é uma verdadeira Mão-na-Roda, pois te dá uma visão detalhada das requisições HTTP que estão acontecendo por “debaixo dos panos”!

Tanto na aba “Console” quanto na aba “Net”, para cada requisição, você poderá visualizar o conteúdo da resposta retornada, bem como o que foi enviado via post, ou via query string, para o servidor! Lá também estarão os cabeçalhos HTTP relacionados com aquela requisição, etc.
Essas informações facilitam bastante para identificar alguns problemas, quando, por exemplo, você percebe que sua tela se desfigurou depois de uma requisição que aconteceu “debaixo dos panos”, e não faz idéia do que foi retornado pelo servidor!

Visualização da àrvore DOM

Outra funcionalidade interessante, é a de você poder visualizar a àrvore DOM da página e navegar nela. Ajuda muito a visualizar o estado de determinados elementos que compõem a tua interface.

Pra quem não conhece o plugin ainda, ou não tem uma versão alternativa tão boa quanto, vale muito a pena testar!

Inclusive, existe uma versão portada para outros browsers também, chamada Firebug Lite. Não a testei, porque acho meio intrusivo demais inserir um novo arquivo JavaScript na tua página com esse fim…mas dados os benefícios, dependendo da situação, talvez seja uma boa!

No mais, um grande abraço à todos, e bons códigos!