Encontro 05 - Rede Daora

Inspeção - Entendendo Sites com a IA

Inspecionar Elemento / Ferramentas de Desenvolvedor (F12) · DOM · Console

O que é Inspecionar Elemento / Ferramentas de Desenvolvedor

Seção 01 · Definição

O que é o Inspecionar Elemento / Ferramentas de Desenvolvedor

Inspecionar Elemento é a porta de entrada. Ferramentas de Desenvolvedor é o conjunto completo que abre.

Nome	O que é	Como abrir
Inspecionar Elemento	Clique direito em qualquer parte do site	Clique direito → Inspecionar
Ferramentas de Desenvolvedor (DevTools)	Painel completo com Elements, Styles e Console	F12 ou Ctrl+Shift+C

Seção 01 · Para que serve

Pra que serve inspecionar

Aprender

Ver como sites bons foram montados, por dentro.

Copiar técnicas

Trazer uma cor, um espaçamento ou um efeito para o meu projeto.

Resolver problemas

Descobrir por que algo não aparece ou não funciona.

Entender padrões

Reparar o que todo site bem feito repete.

Pedir à IA

Copiar o código e pedir explicação em português simples.

Corrigir erros

Ler o recado vermelho do Console e levar para a IA corrigir.

Seção 01 · Atalhos

Como acessar no computador

Três jeitos de abrir. No celular, outro caminho.

Atalho	O que faz
`F12`	Abre e fecha o painel completo
`Ctrl + Shift + C`	Abre já no modo de seleção de elemento
`Esc`	Mostra ou esconde o Console dentro do painel
Clique direito → Inspecionar	Abre direto no elemento clicado

No celular: conecte o cabo USB, abra chrome://inspect no computador e inspecione a aba do celular.

Elements e DOM

Seção 02 · As 3 abas

As 3 abas que importam

Elements

Estrutura viva (DOM). Árvore de etiquetas que posso navegar.

Styles

Visual. Cores, fontes, tamanhos e espaços do elemento selecionado.

Console

Recados. Vermelho é erro, amarelo é aviso.

Elements é o DOM - a versão viva da página. Ao recarregar (F5), tudo volta.

Seção 02 · DOM

O que é o DOM - a planta viva

HTML no arquivo é a planta no papel. DOM é a casa construída - a versão viva que o navegador montou e que posso mexer ao vivo.

Como o navegador lê

html
 └─ body
     ├─ header
     │   ├─ h1 Maria da Padaria
     │   └─ p Pães artesanais
     └─ section
         └─ h2 Nossos pães

Regras do DOM

Elements mostra o DOM, não o arquivo. Mudanças ali são teste ao vivo - somem ao recarregar. Para ficar, copio e levo para a IA.

Seção 02 · Navegação

Como navegar e o que procurar

Como navegar

Clique na seta para abrir e fechar cada tag
Passe o mouse - a área acende na página
Clique direito → Copy → Copy outerHTML para levar à IA

O que procurar

Hierarquia h1 → h2 → h3 em ordem, sem pular
Cada <section> com um assunto
Classes com nomes claros (hero, botao)
Toda imagem com alt que descreve o que mostra

Styles

Seção 03 · Propriedades

CSS - Propriedades que mais aparecem

Propriedade	O que faz	Exemplo
`color`	Cor do texto	#1A1A1A
`background-color`	Cor de fundo	#FFF8F0
`font-size`	Tamanho da letra	32px
`font-weight`	Peso da letra	700
`padding`	Respiro interno	24px
`margin`	Distância entre blocos	16px
`border-radius`	Arredondamento	8px
`width`	Largura	100%

Seção 03 · Valores

Valores que mudam tudo

border-radius

0 quadrado e rígido → 50px macio e convidativo

padding

8px apertado → 40px respirado e premium

font-weight

400 comum → 700 forte e hierárquico

Console

Seção 04 · Console

O erro que você mais vai ver: 404

O Console mostra recados em vermelho. O mais comum é o 404.

Failed to load resource: the server responded with a status of 404 ()
  imagem.jpg  ·  style.css  ·  favicon.ico

O que significa

O navegador pediu um arquivo e não achou. Caminho errado ou arquivo sem envio (sem push).

Como corrigir com a IA

Copie o erro e cole: "Meu Console mostra [erro]. Por que quebrou e me dá a correção?"

Seção 04 · Categorias

Os tipos de erros

Haverá vários tipos de vermelho, com causas diferentes.

Categoria	Exemplo	Causa comum
Recurso não encontrado	404	Arquivo com nome ou pasta errada, sem push
Recurso bloqueado	403 / CORS / Mixed Content	Permissão ou site http dentro de https
Código quebrado	SyntaxError	Letra ou símbolo faltando no JS

Seção 04 · Usando a IA

Usando a IA como tradutora e corretora

Dois gestos: traduzir e corrigir.

Traduzir

Copie o código (outerHTML ou CSS) e peça:

Copie este HTML e explique como
se fosse para iniciante

Corrigir

Copie o erro do Console e peça:

Colei o erro do Console: [erro].
Por que quebrou e me dá a correção?

Cores: peça "extraia a paleta deste site com nomes e hex". 404: "onde está o caminho errado e como corrigir?"

Prática guiada

Seção 05 · Guia

Guia: analisar um site em 7 passos

Escolher o site

Um site do mesmo segmento que o meu projeto.

Abrir o F12 e checar o Console

F12 → Console. Tem vermelho? Copie e leve para a IA.

Mapear a hierarquia

Elements: h1 → h2 → h3 em ordem? font-size no Styles.

Mapear as cores

Styles: quais color e background-color aparecem?

Mapear o respiro

Styles: padding, margin e o overlay azul/laranja.

Perguntar à IA

Cole o trecho e peça explicação ou correção.

Anotar

O que levar e o que evitar no meu projeto.

Seção 06 · Checklist

Checklist de inspeção

Antes de dizer que analisei, marco um a um.

Hierarquia h1 → h2 → h3 sem pular

Títulos e textos com tamanhos coerentes

Cores com contraste legível

Espaços com respiro (padding e margin)

Imagens com alt que descreve

Botão com cor de destaque

Fica bom no celular

Console sem vermelho - sem 404

Seção 05 · Problemas

Problemas comuns

Problema	O que fazer
F12 não abre	Tente Ctrl+Shift+C ou clique direito → Inspecionar
Não entendo o código	Copie e peça: "explique como se fosse para iniciante"
Mudei no F12 e sumiu	Normal. Elements é teste ao vivo. Recarregue e leve para a IA para ficar
Console mostra 404	Copie o erro e peça: "onde está o caminho errado?"
Não acho a paleta	Clique no elemento → Styles → copie as cores e peça para a IA extrair a paleta

Próxima aula

O que vem depois

Módulo 2 · Aprofundando na prática

Encontro 05 · aqui

Inspeção

F12, DOM e Console

Encontro 06

Encontro 07

Encontro 08