Dicas
- 17/12/2009
Firebug, amigo do dia-a-dia…
(4 votos, média: 4.50 de 5)
Loading ...Hoje vou falar de uma ferramenta muito útil no dia-a-dia de um desenvolvedor web: O Firebug.
Bom, o Firebug é uma extenção para o Firefox que nos possibilita fazer o seguinte:
- Visualizar a estrutura da página passando o mouse nos elementos(inspect);
- Alterar o código fonte do HTML ou CSS e verificar o resultado direto no browser(na hora);
- Ver o log detalhado dos requests(chamadas de arquivos .js, .css, imagens, chamdas Ajax);
- Um console Javascript integrado para executar comandos(pode-se acessar variáveis, funções, etc…);
- Possibilidade de enviar LOGs para ele(fim dos ‘alerts’);
- Debugar o JavaScript.
Vou explicar cada um dos pontos acima citados. O Firebug tem mais coisas, eu decidi citar estas pois são as que eu utilizo.
Antes de mais nada você precisa instalar o Firebug. Aqui você pode fazer a instalação.
1) Visualizar a estrutura da página passando o mouse nos elementos
Esta funcionalidade eu uso muito quando quero achar um CSS ou HTML específico. Por exemplo, se você esta com alguma DIV com problema de alinhamento, você vai abrir o Firebug e clicar em “Ferramentas / Firebug / Inspecionar Elemento”. Agora, mova o ponteiro do mouse sobre os elementos da página(DIVs, imagens, tabelas…).
- O cursor do mouse está sobre um elemento com o título de um post em meu blog;
- Automaticamente o código fonte HTML da página é exibido e o elemento com foco fica em destaque;
- Ele mostra o código CSS aplicado no elemento;
Perceberam que para achar erros fica muito fácil?
2) Alterar o código fonte do HTML ou CSS e verificar o resultado direto no browser(na hora)
Esta funcionalidade é dependente da primeira que foi explicada. Com um elemento selecionado pelo ‘inspect’, clique nele e altere algum valor do CSS carregado na janela do Firebug.Veja a imagem abaixo:
Eu alterei o atributo ‘color’ do H2 e o texto ficou vermelho na hora. Você pode alterar qualquer valor ou ainda incluir/remover atributos.
Por hoje é isso, vou postar mais sobre o Firebug(tudo que comentei no início do post).
Um grande abraço!!!
