Como usar o Firebug

O Firebug é uma extensão para navegadores que permite que você edite, encontre erros e monitore sites em tempo real. Se você é um desenvolvedor web e não utiliza o Firebug, saiba que está deixando de poupar muitas horas de trabalho.

Conheça outras ferramentas para desenvolvedores web que irão ajudá-lo no desenvolvimento de sites.

Instalando o Firebug

Se você ainda não utiliza o Firebug, saiba que sua instalação é rápida e simples. Atualmente é possível instalar o Firebug no Firefox e no Google Chrome, mas a extensão para o Firefox é muito mais completa. Portanto, se você não tiver o Firefox instalado, aconselho a instalá-lo, pois as melhores extensões para desenvolvedores web são para Firefox. Para instalar o Firebug, basta visitar o site da extensão:

Depois de instalado, o ícone do Firebug vai aparecer da seguinte forma:

Ícone do Firebug no Firefox e Google Chrome

Editando um site em tempo real

Vamos ver agora como funciona a edição em tempo real do Firebug. Irei editar o site do Google, mas é importante lembrar que a edição em tempo real do Firebug é apenas para testes, ela não fica salva. Por isso que é possível editar qualquer site, caso contrário eu não teria como editar o site do Google, pois não tenho acesso ao seu FTP.

Para facilitar a nossa vida, o Firebug possui uma ferramenta para inspeção de elementos. Basta clicar nela e clicar no elemento que deseja editar. Veja na imagem abaixo o passo-a-passo:

Passo-a-passo para editar sites com o Firebug

  1. Botão para inspeção de elementos. Basta clicar nele e escolher o elemento que deseja editar
  2. O elemento que iremos editar nesse exemplo será o botão de “Mais” da barra superior do Google
  3. Ao clicar no elemento escolhido, automaticamente o Firebug abre o código para você, facilitando nossa vida, pois não precisamos ficar procurando o que vai ser editado
  4. Em seguida basta dar dois cliques em cima do “Mais” e escrever o que quiser. Nesse caso escrevi “Editando sites com o Firebug”
  5. E finalmente o resultado final. Viu como é simples?

Essa foi apenas uma edição simples. É possível editar qualquer elemento do site, desde o CSS até o JavaScript.

Monitorando o site

Essa funcionalidade do Firebug é muito importante para analisar se o seu site não está consumindo muita banda do servidor. Basta abrir o site, iniciar o Firebug e clicar em Rede para visualizar todos os dados enviados pelo site.

Monitoramento do site pelo Firebug

Nos dados de monitoramento do Firebug, é possível ver todos os arquivos que foram carregados do site, o tempo que demorou a carregar cada arquivo, o tamanho total dos arquivos carregados e o tempo total que levou para abrir o site.

Se você utiliza jQuery, realizar esses testes de monitoramento é muito importante. Dependo dos efeitos que você utilize, o tamanho total do site pode ser infinito. Por exemplo, se você utiliza uma função que atualiza uma div constantemente, obviamente o site vai continuar baixando dados até que a aba seja fechada. Isso é muito utilizado em contadores, então fica a dica.

Essas foram algumas das funcionalidades que o Firebug possui. Ainda não usa? Acha que vale a pena usá-lo? Não deixe de expressar sua opinião.

Comments

  • gostei da dica! Já conhecia o firebug, mas ainda não sabia como usar exatamente…abçs

    Di web10 de setembro de 2012
    • Obrigado pelo comentário, qualquer dúvida estou a disposição. Abraço.

      Renato França18 de setembro de 2012
  • Ola. Ate a parte da edicao esta ok. Mas e para salvar? Tenho o chrome, devo mudar p firefox? Se puder me dizer como acessar pasta destino como exemplo agradeço. Muito.

    leo5 de abril de 2013
    • Olá Leo, o Firebug permite apenas que você faça edições e as visualize, não é possível salvar essas edições. Para salvar você tem que abrir o seu projeto em alguma IDE ou editor de texto e realizar as alterações por lá. Qualquer outra dúvida é só perguntar.

      Renato França6 de abril de 2013
  • Ola, muito bom o post!
    Gostaria de saber como localizar o arquivo no computador para modificá-lo salvando as alterações, utilizando o firebug.
    Como há muitos arquivos dentro do projeto, eu me perco e gostaria de saber como o firebug me diz pelo menos o nome do arquivo que esta sendo feita a modificação.

    Desde já agradeço

    Felipe8 de abril de 2013
    • Olá Felipe, pelo que eu sei não dá para saber o caminho do arquivo que está sendo modificado pelo Firebug. Recomendo editar pelo Firebug apenas para rápidas visualizações ou para corrigir bugs no código. Obrigado pelo comentário Felipe.

      Renato França11 de abril de 2013
  • Renato França, apergunta do Felipe era sobre o nome do arquivo que o firebug está mostrando… Tem como saber o nome do arquivo?

    Leandro26 de abril de 2013
    • Leandro, tem como saber, mas depende da estrutura do site. Basta ir na aba DOM e procurar por location. A questão é que se o site utilizar url amigável, não vai mostrar o nome do arquivo (pelo menos eu não consigo achar). Mas qualquer outra dúvida é só entrar em contato. Obrigado pelo comentário.

      Renato França28 de abril de 2013
  • Olá, já conhecia o firebug porém não sei direito como saber qual html alterar quando acho o código para se alterar.
    depois que achei o local, como faço para saber o caminho e o arquivo que contem a linha exata?

    Carlos Ono18 de julho de 2013
    • Carlos, vai depender da estrutura do site. Achando o arquivo, é só pesquisar pelo termo que você acha a linha exata.

      Renato França31 de julho de 2013
  • Muito bom Renato, continue nos ajudando. Abraços.

    Ronimarcos25 de setembro de 2013
    • Ronimarcos,

      Obrigado. Abraços!

      Renato França17 de outubro de 2013
  • O firebug está instalado mas só abre os sites online o meu local não onde configurar isso abraços

    Lui11 de dezembro de 2013
  • Resolvi instalando firefox grata.

    Lui11 de dezembro de 2013

Deixe uma resposta