Tutorial – FIREBUG Ótima ferramenta para inspecionar elementos em HTML/CSS


O tutorial de hoje é sobre o Firebug, uma extensão que você instala no seu navegador para facilitar o seu trabalho com HTML e CSS.

Primeiro visite o site http://get.firebug.com e instale a extensão. É recomendável que você tenha o Firefox para usá-lo, pois fornece mais opções, e pode explorar as funções por completo, mas se você não usa o Firefox, visite http://getfirebug.com/lite e instale no navegador que você usa. Você também pode instalar essa extensão através da Central de Extensões do Firefox ou do Chrome fazendo uma busca por Firebug e instalando.

No próprio Chrome:

1. Ferramentas > Tools > Extensions.

2. Get More Extensions.

3. Busca por “Firebug” e instala.

 

E no Firefox:

1. File > Complementos.

2. Adicionar.

3. E faz a mesma coisa que do Chrome. Busca por “Firebug” e instala.

Para colocá-lo para funcionar reinicie o navegador, acesse um site que deseja analisar e pressione F12 que abrirá a janela do Firebug na parte de baixo. (Imagem abaixo).

Na aba HTML note que quando cliquei em “+” para estender as Div’s da estrutura do site e coloco o mouse em cima, ela realça visualmente, no que facilita para reconhecer o espaço que ela ocupa.

Também tem a aba “Estilo” onde podemos consultar e manipular o CSS da página. Selecionamos a “Div-id-Redessocias” e na aba “Estilos” aparece todas as regras e seletores CSS da div em questão.

Na aba “HTML” selecionei um li da lista não-ordenada e tirei a flutuação, e desordenou toda a lista. Nota-se que essa extensão é muito boa para fazermos testes no html e css de sites.

Note que o Firebug mostra diversas regras de CSS que não declaramos no site feito, isso é próprio do navegador. O firebug também faz alterações como por exemplo, se escrevermos no CSS da maneira agrupada ex: “font: 18px Verdana, Courier, Monospace;” ele pode dividir as regras, ex: “font-family:Verdana, Courier, Monospace; font-size:18px;”.

Você também pode selecionar um elemento da página selecionando o ícone retângulo com um “ponteiro + mouse”…

…escolhendo um elemento na área visual da página…

…ou sem selecionar o “retângulo + ponteiro do mouse” clicando em uma área da página e escolhendo “inspecionar elemento”.

 

 

E mais, selecionando um elemento e clicando em “Exibição” na parte direita do Firebug, podemos ver quanto ele tem de padding (enchimento), border(borda), margin (margem) e preenchimento. Observe a régua que aparece quando posiciono o ponteiro do mouse sobre eles.

 

Mas o Firebug não se resume a isso, tem várias outras funções. Explore por conta própria, de preferência usando a versão do Firefox por ser mais completa.

Siga-me no Facebook

Comments

comments

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios são marcados com *