Desenvolvimento

3 jan, 2007

Firebug: a extensão do Firefox para desenvolvedores

Publicidade

Atualmente encontramos um mar de
extensões para o navegador
Firefox, mas um que ultimamente tem se destacado é o Firebug
na sua versão
1.0 beta. Essa extensão funciona como uma ferramenta de
monitoração
e edição
da codificação existente em uma página Web.
Na sua versão anterior era somente possível
monitorar o código, mas na nova versão beta também é possível
alterar os códigos em HTML e CSS, em tempo real.

Essa ferramenta
hoje também possui um validador HTML e CSS,
um console Javascript padrão Firefox e um DOM inspector.
Outra funcionalidade que integra a extensão é inspeção
de XMLHttpRequest, usada no desenvolvimento AJAX, sendo possível
identificar erros de relacionados a esse serviço.

A instalação é muito
simples, como a de uma extensão convencional, e uma vez
ativada, divide a tela pela metade. Na parte superior encontra-se
a página
visitada e embaixo o console do FireBug, como é mostrado
na figura abaixo:

O recurso de edição “online” se
apresenta como uma ótima solução para um
acabamento de design da página em um projeto, podendo
verificar possíveis problemas e testar soluções.
A manipulação do CSS,
por exemplo, se torna muito prático, precisando apenas
abrir o console, clicar na aba CSS, que mostrará a
listagem dos arquivos .css.

Selecione o desejado e o código
será mostrado. Conforme
a alteração é feita, será mostrado
o resultado em tempo real. Na figura abaixo mostra o console
para edição do CSS, ativando a modificação
da propriedade color:

Outros recursos da extensão:

. Visualização
de métricas CSS
: Exibe
todas as medidas de propriedades padding e margin, alinhamentos
de elementos e marcações através
de um display próprio, sendo possível da alteração
dos valores dinamicamente.

. Depurador de erros:
Trabalha como se fosse um ambiente convencional de programação,
mostrando resumo de erros, marcação
para anulação e busca específica através
de filtros.

. Monitor de atividades:
Para sistemas que usam AJAX, fornece informações
sobre performance de carregamento de atividades e monitoramento
do XMLHttpRequest.

. Debug Javascript: É possível
buscar por scripts facilmente, interromper ou anular execuções,
executar por etapas e outros recursos de um ambiente de
programação.

Enfim, o FireBug é uma extensão
essencial para um desenvolvedor web, tanto no design quanto na
programação. Como ainda está na
versão beta, pode-se encontrar alguns problemas, mas no
geral a ferramenta atende tudo o que promete. E espere por mais
atualizações!

Para saber mais, acesse o site oficial
do Firebug. Abraços!