Cheatsheet Chrome DevTools

F12              (abrir)
Ctrl + Shift + I   (abrir)
Ctrl + Shift + J   (console direto)
Ctrl + Shift + C   (inspecionar elemento)
Clique direito → Inspecionar

Aceder às ferramentas.

Ctrl + [ / ]       (painel anterior/seguinte)
Ctrl + Shift + P   (command palette)
Esc               (toggle console drawer)
Ctrl + Shift + D   (dock position)

Mover-se nos DevTools.

Ctrl + Shift + P

Comandos úteis:
"screenshot" → captura de ecrã
"theme" → modo escuro/claro
"coverage" → código não usado
"animation" → inspetor de animações

Ações rápidas.

Ctrl + Shift + C (seletor)
Clique no elemento
Hover → highlight
Ctrl + Z (desfazer edição DOM)
Arrastar para reordenar

Explorar o DOM.

Painel Styles → editar valores
Clique na cor → color picker
Toggle checkbox → ativar/desativar
+ → adicionar propriedade
Forçar estados: :hover, :active

Modificar estilos em tempo real.

Computed tab → box model visual
Margin, Border, Padding, Content
Flexbox: badge "flex" no elemento
Grid: badge "grid" + overlay

Visualizar layout.

Clique direito no elemento:
→ Break on → subtree modifications
→ Break on → attribute modifications
→ Break on → node removal
→ Copy → Copy selector/outerHTML

Monitorizar mudanças no DOM.

console.log(obj)
console.table(array)
console.dir(obj)
console.time('label')
console.timeEnd('label')
console.group('Grupo')
console.trace()

Métodos de console.

$0           # elemento selecionado
$('selector')  # querySelector
$$('selector') # querySelectorAll
$x('//div')   # XPath
monitorEvents(el, 'click')

Atalhos do console.

debug(função)  # breakpoint na função
undebug(função)
copy(obj)     # copiar para clipboard
keys(obj)     # listar chaves
values(obj)   # listar valores

Ferramentas de debug.

Ctrl + L      (limpar console)
Filtro: Errors / Warnings / Info
Regex no filtro
Ctrl + F      (pesquisar no console)
Preserve log (manter ao navegar)

Gerir output do console.

Network tab → recarregar página
Filtrar: XHR, JS, CSS, Img, Media
Clique no pedido → Headers/Payload
Ctrl + E   (gravar/parar)
Disable cache (checkbox)

Analisar tráfego de rede.

Headers → status, timing
Payload → corpo do request
Preview → resposta formatada
Response → resposta raw
Timing → waterfall detalhado

Detalhes de cada pedido.

Network conditions → Throttling:
  Fast 3G / Slow 3G / Offline

Custom profile:
  Download: 1.5 Mb/s
  Upload: 750 Kb/s
  Latency: 40ms

Simular redes lentas.

Clique direito → Save all as HAR
Importar HAR para análise
Waterfall → ordem e duração
Size → tamanho transferido
Initiator → origem do pedido

Exportar e analisar.

Performance tab → ● (gravar)
Ctrl + E (iniciar/parar)
Recarregar com gravação ativa
Analisar: Main, Compositor, GPU
Screenshots timeline

Perfil de performance.

LCP (Largest Contentful Paint)
FID (First Input Delay)
CLS (Cumulative Layout Shift)
TTFB (Time to First Byte)
FCP (First Contentful Paint)

Métricas de performance.

Memory tab → Take snapshot
Comparar snapshots (leaks)
Allocation timeline
Allocation sampling
Retainers → o que mantém o objeto

Deteção de memory leaks.

Sources tab → clique na linha
Conditional: clique direito → Add
Logpoint: não para, só loga
Event listener breakpoints
DOM breakpoints (Elements tab)
XHR/fetch breakpoints

Tipos de breakpoints.

F8   (continuar)
F10  (step over)
F11  (step into)
Shift+F11 (step out)
Ctrl+P (abrir ficheiro)
Ctrl+Shift+F (pesquisar em tudo)

Controlo de execução.

Lighthouse tab → Generate report
Categorias:
  Performance
  Accessibility
  Best Practices
  SEO
Mobile / Desktop

Auditoria automática.

Local Storage / Session Storage
Cookies → ver/editar/apagar
Cache Storage / Service Workers
IndexedDB → explorar dados
Manifest → PWA config

Armazenamento do browser.