Elements

Inspecionar e Editar

Right-click -> Inspect	Abrir painel Elements para o elemento
Double-click tag/attribute	Editar HTML inline
Delete key	Excluir nó selecionado
Ctrl+Z	Desfazer alteração no DOM
H key	Alternar visibilidade do elemento selecionado
Drag node	Mover elemento na árvore DOM

Painel Styles

element.style {}	Adicionar estilos inline ao elemento
Click property value	Editar valor CSS ao vivo
Checkbox next to rule	Ativar/desativar propriedade CSS
:hov button	Forçar pseudo-estados do elemento (:hover, :focus)
.cls button	Adicionar/remover classes CSS
Color swatch	Abrir seletor de cores
Computed tab	Ver valores CSS computados finais

Console

API do Console

console.log("info");          console.warn("warning");
console.error("error");       console.table(arrayOrObj);
console.group("label");       console.groupEnd();
console.time("t"); /*...*/ console.timeEnd("t");

Utilitários do Console

$0	Elemento selecionado no painel Elements
$('sel') / $$('sel')	Atalho para querySelector / querySelectorAll
copy(obj)	Copiar objeto como string para a área de transferência
clear()	Limpar saída do console
monitor(fn)	Registrar chamadas à função fn
monitorEvents(el, 'click')	Registrar eventos no elemento
keys(obj) / values(obj)	Chaves / valores do objeto
$_	Resultado da última expressão avaliada

Filtros

Log levels dropdown	Filtrar por verbose/info/warn/error
Filter text box	Pesquisar saída do console
-url:extension	Excluir mensagens por URL de origem
context: dropdown	Filtrar por contexto iframe/worker

Network

Recursos do Painel Network

Filter bar	Filtrar por tipo: XHR, JS, CSS, Img, Doc, WS
Search (Ctrl+F)	Buscar em todos os corpos de requisição/resposta
Preserve log	Manter log durante navegação
Disable cache	Ignorar cache do browser enquanto DevTools estiver aberto
Throttling dropdown	Simular Slow 3G, Fast 3G, Offline
Block request URL	Clique direito na requisição -> Block URL

Abas de Detalhes da Requisição

Headers	Headers de requisição/resposta, código de status
Payload	Corpo do POST, parâmetros de query
Preview	Resposta formatada (JSON, HTML, imagem)
Response	Corpo bruto da resposta
Timing	DNS, conexão, TLS, TTFB, download
Initiator	Stack trace que originou a requisição
Cookies	Cookies enviados/recebidos

Copiar e Exportar

Right-click -> Copy as cURL	Copiar requisição como comando cURL
Copy as fetch	Copiar como JavaScript fetch()
Export HAR	Exportar todas as requisições como arquivo HAR
Copy response	Copiar corpo da resposta para área de transferência

Sources

Breakpoints

Click line number	Ativar/desativar breakpoint de linha
Right-click -> Conditional	Parar somente quando expressão for verdadeira
Right-click -> Logpoint	Registrar sem pausar execução
DOM breakpoint	Parar em modificação de sub-árvore/atributo/remoção
XHR/Fetch breakpoint	Parar quando URL contiver string
Event listener breakpoint	Parar em tipos de eventos específicos

Controles do Depurador

F8 / Ctrl+\	Continuar / Pausar execução
F10	Passar sobre próxima chamada de função
F11	Entrar na chamada de função
Shift+F11	Sair da função atual
Ctrl+Shift+P -> "never pause"	Desativar todos os breakpoints

Painéis de Depuração

Watch	Monitorar valores de expressões
Scope	Variáveis locais, closure e globais
Call Stack	Cadeia de chamadas de função
Snippets	Salvar e executar código JS reutilizável

Performance

Gravação

Record button (Ctrl+E)	Iniciar/parar gravação de performance
Reload button	Gravar performance de carregamento
Screenshots checkbox	Capturar linha do tempo visual
CPU throttle dropdown	Simular lentidão de CPU 4x/6x
Network throttle	Simular rede lenta durante gravação

Lendo o Flame Chart

Main track	Execução JavaScript (flame chart)
Network track	Linha do tempo de requisições de rede
Frames track	FPS e duração dos frames
Timings track	Marcadores FCP, LCP, DCL, Load
Yellow bars	JavaScript (scripting)
Purple bars	Layout / renderização
Green bars	Pintura / composição

Bottom-Up e Resumo

Summary tab	Distribuição de tempo: scripting, rendering, etc.
Bottom-Up tab	Funções mais custosas primeiro
Call Tree tab	Hierarquia de chamadas da raiz até folhas
Event Log tab	Lista cronológica de eventos

Application

Armazenamento

Local Storage	Ver/editar pares chave-valor por origem
Session Storage	Ver/editar armazenamento de sessão
IndexedDB	Inspecionar object stores e registros
Cookies	Ver/editar/excluir cookies por domínio
Cache Storage	Inspecionar caches do Service Worker
Clear storage	Limpar tipos de armazenamento selecionados em lote

Service Workers e Manifest

Service Workers	Ver registro, status, push/sync
Update on reload	Forçar atualização do SW a cada reload
Bypass for network	Ignorar SW e ir direto para a rede
Manifest	Ver detalhes do manifesto do web app
Offline checkbox	Simular modo offline

Lighthouse

Executando Auditorias

Mode: Navigation	Auditoria completa de carregamento
Mode: Timespan	Auditar interações ao longo do tempo
Mode: Snapshot	Auditar estado atual da página
Categories	Performance, Acessibilidade, Melhores Práticas, SEO
Device	Simulação Mobile ou Desktop

Métricas Principais

FCP (First Contentful Paint)	Tempo até primeiro conteúdo visível
LCP (Largest Contentful Paint)	Tempo até maior elemento visível
TBT (Total Blocking Time)	Soma do tempo de bloqueio de tarefas longas
CLS (Cumulative Layout Shift)	Pontuação de estabilidade visual
SI (Speed Index)	Rapidez com que o conteúdo é populado visualmente
INP (Interaction to Next Paint)	Responsividade à entrada do usuário

Atalhos

Abrir DevTools

F12 / Ctrl+Shift+I	Abrir/fechar DevTools
Ctrl+Shift+J	Abrir painel Console
Ctrl+Shift+C	Abrir Elements + modo inspeção
Ctrl+Shift+M	Alternar barra de dispositivos (responsivo)

Navegação e Busca

Ctrl+Shift+P	Menu de Comandos (executar qualquer ação)
Ctrl+P	Abrir arquivo (Go to File)
Ctrl+Shift+F	Buscar em todos os arquivos
Ctrl+G	Ir para número de linha no Sources
Ctrl+[ / Ctrl+]	Alternar entre painéis

Edição e Console

Ctrl+Shift+D	Alternar posição de encaixe do DevTools
Ctrl+L (Console)	Limpar saída do console
Shift+Enter (Console)	Entrada multilinha
Esc	Alternar gaveta do console
Ctrl+K (Console)	Limpar console

Debug Mobile

Barra de Dispositivos

Ctrl+Shift+M	Alternar barra de dispositivos
Device dropdown	Dimensões predefinidas de celular/tablet
Responsive mode	Redimensionar viewport livremente
DPR dropdown	Alterar proporção de pixels do dispositivo
Throttling	Simular CPU + rede mobile
Show media queries	Visualizar breakpoints CSS

Depuração Remota (Android)

1. Enable USB debugging	Settings -> Developer Options no dispositivo
2. Connect USB	Conectar dispositivo Android ao computador
3. chrome://inspect	Abrir no Chrome desktop
4. Click Inspect	Abrir DevTools para página mobile

Requer Chrome tanto no desktop quanto no dispositivo Android

Substituição de Sensores

Geolocation	Substituir coordenadas GPS
Orientation	Simular orientação do dispositivo
Touch	Simular eventos de toque
Idle detection	Substituir API de detecção de inatividade

Padrões Comuns

Depurar Problemas de Rede

// In Console: monitor all fetch requests
const origFetch = window.fetch;
window.fetch = (...args) => {
  console.log('fetch:', args);
  return origFetch(...args);
};

Fluxo de Performance

1. Lighthouse audit	Identificar principais problemas de performance
2. Performance recording	Encontrar tarefas longas no flame chart
3. Coverage tab	Encontrar CSS/JS não utilizado (Ctrl+Shift+P -> Coverage)
4. Network waterfall	Identificar recursos bloqueantes
5. Rendering tab	Visualizar paint/layout (Ctrl+Shift+P -> Rendering)

Snippets Úteis no Console

// List all event listeners on element
getEventListeners($0);

// Monitor layout shifts
new PerformanceObserver(l => l.getEntries().forEach(
  e => console.log('CLS:', e)
)).observe({ type: 'layout-shift', buffered: true });

REFERÊNCIA RÁPIDA CHROME DEVTOOLS