Como usar o Firebug

Renato França, 6 de fevereiro de 2012

Categorias: Desenvolvimento web, Tutoriais

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.

14 comentários

  1. Di web disse:

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

  2. leo disse:

    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.

    • Renato França disse:

      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.

  3. Felipe disse:

    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

    • Renato França disse:

      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.

  4. Leandro disse:

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

    • Renato França disse:

      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.

  5. Carlos Ono disse:

    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?

    • Renato França disse:

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

  6. Ronimarcos disse:

    Muito bom Renato, continue nos ajudando. Abraços.

  7. Lui disse:

    O firebug está instalado mas só abre os sites online o meu local não onde configurar isso abraços

  8. Lui disse:

    Resolvi instalando firefox grata.

Deixe um comentário

(*)