# Referência Rápida Chrome DevTools

*Elements, Console, Network, Performance, depuração*

> Source: Chrome DevTools Documentation (developer.chrome.com/docs/devtools) · MIT

## Elements

### Inspecionar e Editar

| Command | Description |
|---------|-------------|
| `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

| Command | Description |
|---------|-------------|
| `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

| Command | Description |
|---------|-------------|
| `$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

| Command | Description |
|---------|-------------|
| `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

| Command | Description |
|---------|-------------|
| `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

| Command | Description |
|---------|-------------|
| `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

| Command | Description |
|---------|-------------|
| `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

| Command | Description |
|---------|-------------|
| `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

| Command | Description |
|---------|-------------|
| `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

| Command | Description |
|---------|-------------|
| `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

| Command | Description |
|---------|-------------|
| `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

| Command | Description |
|---------|-------------|
| `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

| Command | Description |
|---------|-------------|
| `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

| Command | Description |
|---------|-------------|
| `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

| Command | Description |
|---------|-------------|
| `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

| Command | Description |
|---------|-------------|
| `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

| Command | Description |
|---------|-------------|
| `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

| Command | Description |
|---------|-------------|
| `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

| Command | Description |
|---------|-------------|
| `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

| Command | Description |
|---------|-------------|
| `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

| Command | Description |
|---------|-------------|
| `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)

| Command | Description |
|---------|-------------|
| `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

| Command | Description |
|---------|-------------|
| `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

| Command | Description |
|---------|-------------|
| `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 });
```