19 de abril de 2007

Puxão de orelha faz bem, JavaScript também. Apresento o Firebug!

Este post fala especificamente do Firebug, uma ferramenta para editar, depurar e monitorar as principais tecnologias usadas em páginas web (e.g. CSS, HTML, JavaScript, DOM).

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 passos

A 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 JavaScript

O 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ões

Apresentei 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ências

Firebug
Firebug add-on
AJAX debugging with Firebug
Blog do Carlos
A Guide for JavaScript Debugging using Firebug for Firefox

7 comentários:

sergio disse...

Firebug rules...

Sem este pequeno plugin teria sido impossivel de desenvolver o meu projecto!

www.mapmyname.com/beta/

:)

Giovane Roslindo Kuhn disse...

Certamente este plugin de agora em diante faz parte do meu tool de desenvolvimento.

mds disse...

Mandou bem d+ cara! :)

Abração.

Carlos disse...

Maravilha, mais um que consigo convencer que Javascript não é ruim =D, já valeu o post. Excelente tutorial do Firebug, parabéns!

Giovane Roslindo Kuhn disse...

Blz Carlos,

Não chegou a ser um tutorial... mas deu para a galera ter uma idéia do potencial da ferramente.

Mas ta na pilha, elaborar um tutorial de depuração com Firebug.

Vlw

Anônimo disse...

eai blz esse é um teste e tal!

Anônimo disse...

eai blz esse é um teste e tal!