Firebug é um excelente complemento para acompanhar outro plugin como Web Developer. Sua interface é fácil de usar e é ativada apenas quando precisamos, além de ser gratuita. O objetivo deste tutorial é mostrar um uso detalhado e profissional de Firebug, também podemos ver outros tutoriais Firebug Web Developer Tool e Inspect HTML with Firebug.
Firebug É uma ferramenta imprescindível para quem programa ou otimiza sites, sejam designers ou webmasters. Assim, podemos eliminar falhas de programação ou design, saber como funcionam e como é a estrutura de uma página web, como todos os elementos que a compõem.
Instalamos o plugin Firebug
Para instalar o plugin, vamos ao site de download do firebug e lá procuramos a versão mais recente da ferramenta para download.
Após a instalação reiniciamos o computador e veremos que ele é adicionado ao iniciar uma web, para ativá-lo clicamos com o botão direito e procuramos a opção Inspecionar elemento:
Depois de ativar a ferramenta, vamos ver as funcionalidades mais importantes:
Guia do console
Console Firebug É onde serão exibidas as mensagens sobre o que a web faz e os erros que ocorrem. Podemos ver mensagens sobre as chamadas para funções ou páginas que a web faz conforme interagimos, mostrando-nos funções, invocações para callback ou webservices e os valores que são trocados em tempo de execução enquanto controlamos o fluxo da aplicação.
Vamos ver alguns exemplos, acessamos o web motores.com.ar, clicamos com o botão direito e ativamos Firebug.
Na guia do console ao fazer uma pesquisa de marcas, veremos que o console mostra que uma função é invocada em Ajax que irá consultar um banco de dados usando php e retornar os modelos no formato JSON e adicioná-los ao combo Modelos. Também podemos ver o parâmetros enviados, o cabeçalho retornado por get ou post e a resposta. Vejamos outro caso de uma loja online.
Neste caso, vemos que o console indica que três fontes ou fontes estão faltando na pasta / css / font, talvez o designer tenha se esquecido de adicioná-las ou alterar as fontes e não removeu as referências anteriores.
Também podemos ver como ao adicionar um produto ao carrinho de compras, ele envia os seguintes parâmetros: função, quantidade do produto e o id do produto.
Função Ajax chamada insertItem não pode 1 Id 5850326Embora possamos ver que só será adicionado se estivermos logados como usuários, caso contrário, solicitará que nos registremos.
Assim, podemos ver como o aplicativo funciona e que parâmetro ele envia ou recebe e quais respostas fornece e qual foi o tempo de resposta, por exemplo, para adicionar um produto que levou 335 milissegundos.
Guia HTML
permite que você veja a estrutura da web e edite o código da página da web em tempo real. Podemos, por exemplo, modificar o código HTML do site ou do código css e visualizá-lo diretamente, sem que essas alterações sejam permanentes. Por exemplo, se acessarmos o site do Ebay, podemos usar o Firebug para alterar a cor do bloco de conteúdo principal ou da web.
Para fazer isso, na guia HTML, procuramos a linha do código HTML que se parece com isto: No painel direito Estilo Ele nos mostrará o estilo css desse elemento, nós clicamos duas vezes na linha após a frase largura: 980px e escrevemos o seguinte:
fundo: vermelho nenhum repetir rolar 0 0;Quando você terminar de escrever, o bloco central ficará vermelho, se atualizarmos a página as alterações serão perdidas e ele retornará ao seu design original.
Também podemos tentar manipular o código html e o código css para trocar o logo do Ebay pelo do Google, isso é feito trocando o url da imagem do logo do Ebay por outro url de uma imagem que desejamos.
Procuramos a linha de código no HTML e alteramos o link src = ”urlimagen”, Então ajustamos os tamanhos
Esta funcionalidade não serve para alterar um design completo, mas para fazer pequenos testes e visualizar alterações, sem ter que acessar um editor.
Guia CSS
A guia do painel CSS Mostra todas as classes CSS e identificadores que criamos ou que a web que estamos analisando possui. A partir deste painel, podemos modificar nossas classes e sentenças css como fizemos anteriormente na guia Estilos do painel HTML.
Guia de script
Este painel é para depuração de código JavaScript ou jQuery. Mostra-nos tudo o que um script faz, suas variáveis, suas funções, depuração por breakpoints, a execução passo a passo de um script, uma tela para controlar a pilha de variáveis e também podemos ver o comportamento das funções.
Guia DOM
O painel SOL ou Modo de Objeto de DocumentoEle é aquele que obtém informações sobre todas as várias propriedades do DOM e seus métodos. O DOM faz parte dos elementos de uma web e permite que os programadores acessem e manipulem páginas da web XHTML.
JQuery fornece métodos para manipular o DOM de forma eficiente. Podemos acessar qualquer atributo de qualquer elemento ou extrair o código HTML de um parágrafo ou bloco. Além disso, ele fornece métodos como .attr (), .HTML (), Y .val () Eles agem como getters e recuperam informações de elementos DOM para uso posterior.
Vamos ver neste exemplo de jQuery e DOM como controlar um div e extrair um texto:
Jquery e DOMExtraia o texto do bloco:
Este é um texto de teste DOM
As tags HTML O elemento é acessado por meio da classe css ou id e, em seguida, a propriedade que pode ser text ou alguma outra que permita jQuery e DOM.
Guia Rede
O objetivo do painel Rede é monitorar o tráfego da web e a carga e o consumo de cada solicitação da web HTTP, este relatório é composto por uma lista de entradas, onde cada uma delas representa uma solicitação / resposta de ida e volta feita pela página.
A janela do painel de rede apresenta uma lista de solicitações, conforme a web é carregada e usada. Cada item da lista mostra as informações produzidas pela solicitação e uma linha do tempo gráfica mostra os bytes consumidos, o tempo que leva para responder, o que representa as fases de carregamento no tempo. A seguir está uma lista das informações, que é exibida para cada solicitação:
- Método de solicitação HTTP
- Código de resposta HTTP e descrição (200.301.404 etc.)
- Nome do arquivo que é invocado
- Nome de domínio de onde a resposta
- Tamanho da resposta em bytes
- Tempo em milissegundos que leva para responder.
Também podemos filtrar para ver as partes como apenas imagens ou apenas arquivos js ou css e, assim, determinar o que pesa mais e como otimizá-lo.Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo