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:
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:
Internet Explorer (sim, ele também tem).
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):
Para colocar a ferramenta à direita do navegador.
Para colocar a ferramenta na parte inferior (rodapé).
Chrome (essa opção está à direita da ferramenta, após clicar nesse ícone: 
)
Para colocar a ferramenta à direita do navegador.
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:
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: 
Chrome: 
Internet Explorer: 
E depois clicar no elemento que deseja inspecionar:
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.
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.
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):
E assim será permitido adicionar uma nova propriedade:
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:
Você também pode alterar o valor de uma propriedade que já está adicionada, clicando no valor dessa propriedade e escolhendo um novo valor:
E por último, você também pode desativar uma propriedade:
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: 
que fica a direita da ferramenta do desenvolvedor, antes do ícone de engrenagem.
No Chrome, o ícone responsável por isso é esse ícone: 
que fica do lado esquerdo da ferramenta do desenvolvedor, ao lado do ícone de inspecionar.
No Internet Explorer é preciso clicar na Aba Emulação:
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:
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).
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).
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:
Bom, pessoal, eu fico por aqui, dúvidas nos comentários e até a próxima.
