Pequenas Dúvidas

  • HTML
  • CSS
  • JS
  • PHP
  • MySQL
  • Marketing Digital
  • Photoshop
Home Utilizando o F12, a ferramenta do desenvolvedor

Utilizando o F12, a ferramenta do desenvolvedor

Durante a conversão do layout para HTML é comum acontecer alguns problemas e para melhor verificar o que ocorreu entre HTML e CSS a melhor forma é utilizar a ferramenta que os principais navegadores disponibilizar de análise, o popularmente conhecido “F12”.

Mas como utilizar o F12?

Para cada navegador existe um jeito diferente, mas todos são similares e nessa postagem eu vou mostrar como utilizar as principais ferramentas em cada um desses navegadores.

Firefox:

Começando pelo navegador Firefox, ao apertar F12 (ou CTRL+ALT+i) você abre as opções do desenvolvedor:

ferramenta_do_desenvoledo1

Vamos conhecer um pouco dos itens dessa barra que ajuda muito para transformar um layout em código HTML/CSS.

Chrome:

No navegador Chrome é bastante semelhante a essa ferramenta do Firefox:

ferramenta_do_desenvoledo2

Internet Explorer (sim, ele também tem).

ferramenta_do_desenvoledo3

Normalmente o posicionamento dessa ferramenta é na parte inferior do navegador, mas também pode ser na lateral direita, para alterar entre essas opções, basta clicar no ícone de opção:

Firefox (essa opção fica à direita da ferramenta, ao lado do ícone de engrenagem):

ferramenta_do_desenvoledo4 Para colocar a ferramenta à direita do navegador.

ferramenta_do_desenvoledo5 Para colocar a ferramenta na parte inferior (rodapé).

Chrome (essa opção está à direita da ferramenta, após clicar nesse ícone: ferramenta_do_desenvoledo6)

ferramenta_do_desenvoledo7 Para colocar a ferramenta à direita do navegador.

ferramenta_do_desenvoledo8 Para colocar a ferramenta na parte inferior (rodapé).

Internet Explorer

O Internet Explorer não possui essa opção diretamente, é preciso desafixar a ferramenta e então fixa-la a direita através do ícone:ferramenta_do_desenvoledo9

IMPORTANTE: Os outros dois navegadores também a opção de desafixar com ícones semelhantes.

A FERRAMENTA INSPECIONAR

O principal recurso da ferramenta do desenvolvedor é a ferramenta de inspecionar, essa ferramenta ajuda a verificar qual formatação o elemento recebeu ou deixou de receber ou se alguma propriedade foi sobrescrita por outra formatação e por isso ela perdeu alguma característica.

Para utilizar o recurso basta clicar no ícone de uma seta sobre um quadrado (retângulo no Internet Explorer) localizado a esquerda da ferramenta do desenvolvedor:

Firefox: ferramenta_do_desenvoledo10

Chrome: ferramenta_do_desenvoledo11

Internet Explorer: ferramenta_do_desenvoledo12

E depois clicar no elemento que deseja inspecionar:

ferramenta_do_desenvoledo13

OBSERVAÇÃO: Inspecionando um elemento utilizando o Firefox na imagem acima.

IMPORTANTE: Cada navegador irá mostrar de uma forma diferente, porém, o importante é o que é mostrado nos dois “blocos” na ferramenta de desenvolvedor (que é semelhante nos três navegadores):

No lado esquerdo eu tenho o HTML e no direito eu tenho o CSS atribuído a ele, inclusive me informando a linha.

No lado esquerdo eu consigo ver toda a estrutura HTML até chegar no elemento que eu inspecionei, conseguindo entender quais foram as atribuições de id, classe ou algum CSS inline.

ferramenta_do_desenvoledo14

Já no lado direito eu tenho todas as atribuições de CSS a esse elemento e tudo o que acontece com ele até o momento.

ferramenta_do_desenvoledo15

Ao rola com a barra de rolagem eu consigo ir visualizando mais informações de toda formatação que esse elemento recebeu.

Também é possível adicionar uma nova propriedade em tempo de execução no elemento. Para adicionar essa nova formatação, basta clicar na última propriedade e então pressionar a tecla TAB (duas vezes):

ferramenta_do_desenvoledo16

E assim será permitido adicionar uma nova propriedade:

ferramenta_do_desenvoledo17

Ao começar a digitar a nova propriedade, a própria fermenta irá disponibilizar um “auto completar”, depois basta pressionar ENTER ou TAB para adicionar o valor a essa propriedade:

ferramenta_do_desenvoledo18

Você também pode alterar o valor de uma propriedade que já está adicionada, clicando no valor dessa propriedade e escolhendo um novo valor:

ferramenta_do_desenvoledo19

ferramenta_do_desenvoledo20

E por último, você também pode desativar uma propriedade:

ferramenta_do_desenvoledo21

Desmarcando a caixa de opção dessa propriedade.

IMPORTANTE: Tudo que for feito na ferramenta ainda não foi feito no CSS, portanto após testar algumas propriedades e encontrar a solução, será necessário aplicar essas propriedades e seus respectivos valores.

SIMULADOR DE RESOLUÇÃO

Outro importante recurso dessa ferramenta é a possibilidade de simular diversas resoluções de um mesmo layout, verificado a sua capacidade de adaptação e desenvolvendo formatações para melhor ajustar o layout aos diversos aparelhos.

No Firefox, essa opção fica em no ícone: ferramenta_do_desenvoledo22 que fica a direita da ferramenta do desenvolvedor, antes do ícone de engrenagem.

No Chrome, o ícone responsável por isso é esse ícone: ferramenta_do_desenvoledo23 que fica do lado esquerdo da ferramenta do desenvolvedor, ao lado do ícone de inspecionar.

No Internet Explorer é preciso clicar na Aba Emulação:

ferramenta_do_desenvoledo24

OBSERVAÇÃO: Cada navegador irá demonstrar de uma forma, mas todas elas são semelhantes, onde é possível escolher a resolução e verificar como o site se comporta:

ferramenta_do_desenvoledo25

OBSERVAÇÃO: Simulação usando a ferramenta no navegador Firefox na imagem acima.

Para conhecer as resoluções de tablets e smartphones, tem um site bastante interessante: http://viewportsizes.com/ que lista uma grande quantidade de aparelhos e suas respectivas versões.

Para desktops podemos consultar o site StatCounter:

http://gs.statcounter.com/#desktop-resolution-BR-monthly-201411-201511

Que irá informar as resoluções mais populares utilizadas.

Também pode ser consultado o site: http://www.w3counter.com/globalstats.php

OBSERVAÇÃO: Ambos em inglês.

IMPORTANTE: Nem sempre utilizar o simular é certeza absoluta de que o layout irá se comportar exatamente daquela forma em um aparelho com aquela resolução, por muitas vezes é importante e se possível testar utilizando o próprio aparelho.

ANALISE DE DESEMPENHO (REDE).

Outro bom recurso para se utilizar na ferramenta do desenvolvedor é a análise de desempenho (REDE/NETWORK) que permite ao desenvolvedor visualizar qual o tempo de carregamento de cada item que compõe a página, dessa forma, permitindo analisar o que pode ser feito para diminuir o tempo de carregamento de uma página. Isso é importante principalmente quando um site é desenvolvido também para smartphones.

Para utilizar, basta clicar em REDE (Network) na ferramenta do desenvolvedor e atualizar a página (caso já tenha carregado).

ferramenta_do_desenvoledo26

OBSERVAÇÃO: Analise de rede utilizando o navegador Firefox na imagem acima.

Com essa informação é possível por exemplo, verificar quais itens podem ser comprimidos e assim obter um melhor desempenho.

Com essa ferramenta também é possível verificar itens que não foram carregados, ou seja, estão faltando na página.

CONSOLE (Eventos)

Por último, outro recurso da ferramenta de desenvolvedor é o console de eventos que permite analisar ações e erros principalmente de Javascript e Jquery (inclusive Ajax/Json).

ferramenta_do_desenvoledo27

OBSERVAÇÃO: Analise de rede utilizando o navegador Firefox na imagem acima.

E assim como a ferramenta de inspeção é possível adicionar em tempo de execução Javascript ou Jquery para verificar sua execução, digitando o script logo abaixo:

ferramenta_do_desenvoledo28

Bom, pessoal, eu fico por aqui, dúvidas nos comentários e até a próxima.

dez 7, 2015Rodrigo Sarri
Como recortar qualquer imagem usando a ferramenta caneta do PhotoshopComo abrir arquivos php no navegador?
Comentários: 1
  1. antonio
    4 years ago

    o que vale é a intenção

    RespostaCancelar

Deixe uma resposta para antonio Cancelar resposta

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.

5 years ago 1 Comentário CSS, HTMLchrome bug, chromebug, f12, ferramenta do desenvolvedor, fire bug, firebug
Posts recentes
  • Como abrir arquivos php no navegador? 21 de dezembro de 2015
  • Utilizando o F12, a ferramenta do desenvolvedor 7 de dezembro de 2015
  • Como recortar qualquer imagem usando a ferramenta caneta do Photoshop 3 de dezembro de 2015
  • Enviar dados de um formulário sem atualizar a página com JQUERY (ajax) 7 de abril de 2015
  • Separar as palavras de uma frase em PHP 9 de fevereiro de 2015
Categorias
  • Adobe Dreamweaver
  • CSS
  • Dicas
  • facebook
  • HTML
  • JQUERY
  • JS
  • Marketing Digital
  • MySQL
  • Photoshop
  • PHP
  • Sem categoria
Nuvem de tags
phpcssjqueryhtmljavascriptcss3inlinematrizlayoutfacebookfan pagedimensõesstyleimagensremover espaço em brancoclassdreamweaveradobetruqesdicaclasseidpáginacadastrar site no googleimplodeadicionar item de segurança banco de dadosvalidar emailarrayrandacertar horahorário de verãofuso horáriogerar número aleatóriovalidar campos phpmysqlsitemapcomo cadastrar site no buscadorcadastrar site no bingcadastrar site no yahoositemap para videossitemap para imagenscadastro no banco de dados phpsitemap para smartphonesitemap para googlecomo construir um sitemap
Outras postagens
Como abrir arquivos php no navegador?
5 years ago
CSS background
CSS plano de fundo (background), quais são as diferenças e como usar?
6 years ago
Utilizando o F12, a ferramenta do desenvolvedor
5 years ago
Buscar
2018 © Pequenas Dúvidas - Aprenda um pouco de HTML CSS JS PHP MySQL e Marketing Digital