Extensão para o Firefox, Firebug possui inúmeros recursos que bem utilizados aumentam sua produtividade.

Ao instalar a extensão um ícone de um inseto se instala no canto inferior direito de seu navegador, a partir daí sempre que estiver visitando uma página você pode clicar no inseto e habilitar os serviços que vem desabilitados por padrão, pois pioram a performance do navegador então use apenas em modo de desenvolvimento ou depuração.

No geral são 6 serviços: Console, HTML, CSS, Script, DOM, Rede que se desdobram de maneira flexível possibilidado inúmeras formas de uso.

A aba Console após habilitada fornece um console javascript interativo, onde você pode digitar desde comandos simples como alert(‘Teste’); até comandos complexos com o objetivo de inspecionar algum objeto da página como document.getElementById(‘menu’); Não esquecendo de mencionar que a aba Console também exibe erros oriundos do javascript da página e ao clicar no erro você consegue verificar a linha que o produziu.

A aba HTML que vem habilitada por padrão fornece o código fonte da página com possibilidade de edição em tempo real de toda a informação contida na página, você pode alterar nome de elementos HTML, editá-los e até removê-los da página. Utilizando a aba HTML e clicando em Inspecionar você pode procurar  com o mouse o exato elemento que você quer editar ou visualizar. Junto da aba HTML é exibida uma janela na lateral direita que possui três abas Estilo, Exibição e DOM.

Ainda na aba HTML vamos esmiuçar essas três abas na lateral, a aba Estilo exibe as folhas de estilo CSS, você pode adicionar novos atributos, alterá-los, removê-los e ainda há um recurso de autocompletar que evita que você erre o nome da propriedade que está editando, a aba Exibição mostra margem, borda, enchimento e tamanho do elemento que você está inspecionando e permite edição seja usando setas para aumentar pixel por pixel ou seja trocando o valor por outro completamente novo, a aba DOM fornece todas as propriedades do objeto e funções que estão atreladas à ele.

Saindo da aba HTML vamos para aba CSS que possui função simples, ela exibe todas as folhas de estilo que estão atreladas ao documento e permite edição em tempo real.

Já a aba Script exibe todos os scripts anexados a página direta (referenciando o arquivo .js) ou indiretamente (adicionando uma função dentro do próprio html) e permite debug do javascript com possibilidade de adicionar variáveis a serem inspecionandas durante a execução do javascript e executar a função passo a passo, pular instruções entre outros recursos que um depurador possui.

A aba DOM, fornece o que a aba DOM do HTML fornece apenas possui um espaço maior de visualização.

E por fim a aba Rede exibe a quantidade de tempo necessária para o download de cada objeto HTML da página e seu tamanho, possibilitanto ao desenvolvedor a descoberta de imagens e javascript muito grandes que poderiam ser diminuídos através de otimização ou compressão.

Não deixe de experimentar a ferramenta, após uma pequena curva de aprendizado, você não conseguirá mais desenvolver sem utilizá-la.