✅ Firebug Web Developer Tool

Índice

É 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.