Firebug Web Developer Tool

É um pacote de utilitários com os quais você pode analisar e testar a velocidade de carregamento de acordo com cada componente, arquivo, também podemos editar, monitorar e depurar o código-fonte, CSS, HTML e Javascript de uma página web instantaneamente e em tempo real observar as mudanças Na internet. Também serve para analisar o comportamento de uma variável ou url com parâmetros, podendo ver quais parâmetros são enviados e o que o servidor responde.
Alguns dos recursos que ele traz Firebug:

• Edição de HTML em tempo real.
• Edição de CSS em tempo real.
• Edição de Javascript em tempo real.
• Layout CSS.
• Depurador de Javascript.
• Motor de pesquisa integrado.
• Monitoramento da atividade da rede.
• DOM Explorer.
• Manipulador de erros em Javascript, CSS e XML

Começaremos baixando e instalando o plugin Firebug:
[color = # 2f4f4f] Baixar Firebug [/ color]

No site de complementos do Mozilla, teremos permissão para acessar e instalar o complemento
Uma vez que o Firebug é instalado e o Firefox reiniciado, podemos acessar rapidamente o Firebug clicando com o botão direito na tela da web em que queremos trabalhar ou a partir do menu de ferramentas
Pegamos a web do exemplo das nações unidas http://www.un.org/en/, fazemos uma licença certa na tela e uma tela com o Firebug será aberta.

PROLONGAR

Neste caso, na guia de rede vemos o peso em kb e em que sequência o navegador renderizou os elementos e quanto tempo levou para cada elemento ser exibido, é interessante notar que dos 6,61 segundos que a página leva para render, dois segundos correspondem a uma única imagem, que é a barra de idiomas, então poderíamos pensar se ele pode ser otimizado.
Na aba HTML e CSS podemos apontar para um bloco da estrutura e ele nos mostrará o código.

PROLONGAR

Aqui, por exemplo, apontamos para o div do banner superior que corresponde a id #topbanner no arquivo style.css. Se clicarmos no código css, podemos modificá-lo e isso será refletido na web temporariamente. A guia do console é aquela que nos permitirá ver e monitorar as invocações de javascript e erros em caso de falha. Em caso de erro, mostrará os arquivos e o número da linha de código onde ocorreu o erro.

PROLONGAR

Firebug nos ajuda a encontrar objetos DOM rapidamente e, em seguida, editá-los na hora. Permite realizar a inspeção DOM.
O Document Object Model ou DOM ('Modelo de Objeto de Documento' ou 'Modelo de Objeto para Representação de Documento') é essencialmente uma interface de programação de aplicativo que fornece um conjunto padrão de objetos para renderizar documentos HTML e XML.