# Riferimento Rapido Chrome DevTools

*Elements, Console, Network, Performance, debugging*

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

## Elements

### Ispezione e Modifica

| Command | Description |
|---------|-------------|
| `Clic destro -> Ispeziona` | Apre il pannello Elements per l'elemento |
| `Doppio clic su tag/attributo` | Modifica HTML inline |
| `Tasto Canc` | Elimina il nodo selezionato |
| `Ctrl+Z` | Annulla modifica DOM |
| `Tasto H` | Alterna visibilità dell'elemento selezionato |
| `Trascina nodo` | Sposta elemento nell'albero DOM |

### Pannello Stili

| Command | Description |
|---------|-------------|
| `element.style {}` | Aggiunge stili inline all'elemento |
| `Clic sul valore proprietà` | Modifica il valore CSS in tempo reale |
| `Casella accanto alla regola` | Attiva/disattiva proprietà CSS |
| `Pulsante :hov` | Forza pseudo-stati (:hover, :focus) |
| `Pulsante .cls` | Aggiunge/rimuove classi CSS |
| `Campione colore` | Apre il selettore colore |
| `Tab Computed` | Visualizza valori CSS calcolati definitivi |

## Console

### API 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à Console

| Command | Description |
|---------|-------------|
| `$0` | Elemento attualmente selezionato in Elements |
| `$('sel') / $$('sel')` | Scorciatoia querySelector / querySelectorAll |
| `copy(obj)` | Copia oggetto come stringa negli appunti |
| `clear()` | Pulisce l'output della console |
| `monitor(fn)` | Registra le chiamate alla funzione fn |
| `monitorEvents(el, 'click')` | Registra eventi sull'elemento |
| `keys(obj) / values(obj)` | Chiavi / valori dell'oggetto |
| `$_ ` | Risultato dell'ultima espressione valutata |

### Filtraggio

| Command | Description |
|---------|-------------|
| `Menu a tendina livelli log` | Filtra per verbose/info/warn/error |
| `Casella filtro testo` | Cerca nell'output della console |
| `-url:extension` | Esclude messaggi per URL sorgente |
| `Menu a tendina context:` | Filtra per contesto iframe/worker |

## Network

### Funzionalità Pannello Network

| Command | Description |
|---------|-------------|
| `Barra filtro` | Filtra per tipo: XHR, JS, CSS, Img, Doc, WS |
| `Cerca (Ctrl+F)` | Cerca in tutti i body richiesta/risposta |
| `Mantieni log` | Conserva il log durante la navigazione |
| `Disabilita cache` | Bypassa la cache del browser con DevTools aperto |
| `Menu a tendina Throttling` | Simula Slow 3G, Fast 3G, Offline |
| `Blocca URL richiesta` | Clic destro sulla richiesta -> Blocca URL |

### Tab Dettagli Richiesta

| Command | Description |
|---------|-------------|
| `Headers` | Header richiesta/risposta, codice stato |
| `Payload` | Corpo POST, parametri query |
| `Preview` | Risposta formattata (JSON, HTML, immagine) |
| `Response` | Corpo risposta grezzo |
| `Timing` | DNS, connessione, TLS, TTFB, download |
| `Initiator` | Stack trace che ha avviato la richiesta |
| `Cookies` | Cookie inviati/ricevuti |

### Copia ed Esporta

| Command | Description |
|---------|-------------|
| `Clic destro -> Copia come cURL` | Copia richiesta come comando cURL |
| `Copia come fetch` | Copia come JavaScript fetch() |
| `Esporta HAR` | Esporta tutte le richieste come file HAR |
| `Copia risposta` | Copia il corpo della risposta negli appunti |

## Sources

### Breakpoint

| Command | Description |
|---------|-------------|
| `Clic sul numero di riga` | Attiva/disattiva breakpoint sulla riga |
| `Clic destro -> Condizionale` | Si ferma solo quando l'espressione è vera |
| `Clic destro -> Logpoint` | Registra senza interrompere l'esecuzione |
| `Breakpoint DOM` | Si ferma su modifica sottoalbero/attributo/rimozione |
| `Breakpoint XHR/Fetch` | Si ferma quando l'URL contiene una stringa |
| `Breakpoint event listener` | Si ferma su tipi di evento specifici |

### Controlli Debugger

| Command | Description |
|---------|-------------|
| `F8 / Ctrl+\` | Riprendi / Metti in pausa l'esecuzione |
| `F10` | Passo oltre la chiamata di funzione |
| `F11` | Entra nella funzione |
| `Shift+F11` | Esci dalla funzione corrente |
| `Ctrl+Shift+P -> "never pause"` | Disabilita tutti i breakpoint |

### Pannelli Debug

| Command | Description |
|---------|-------------|
| `Watch` | Monitora i valori delle espressioni |
| `Scope` | Variabili locali, closure, globali |
| `Call Stack` | Catena di chiamate a funzioni |
| `Snippets` | Salva ed esegui codice JS riutilizzabile |

## Performance

### Registrazione

| Command | Description |
|---------|-------------|
| `Pulsante Registra (Ctrl+E)` | Avvia/ferma la registrazione delle performance |
| `Pulsante Ricarica` | Registra le performance di caricamento pagina |
| `Casella Screenshot` | Cattura la timeline visuale |
| `Menu CPU throttle` | Simula rallentamento CPU 4x/6x |
| `Network throttle` | Simula rete lenta durante la registrazione |

### Lettura del Flame Chart

| Command | Description |
|---------|-------------|
| `Traccia Main` | Esecuzione JavaScript (flame chart) |
| `Traccia Network` | Timeline delle richieste di rete |
| `Traccia Frames` | FPS e durate dei frame |
| `Traccia Timings` | Marcatori FCP, LCP, DCL, Load |
| `Barre gialle` | JavaScript (scripting) |
| `Barre viola` | Layout / rendering |
| `Barre verdi` | Painting / compositing |

### Bottom-Up e Summary

| Command | Description |
|---------|-------------|
| `Tab Summary` | Suddivisione tempo: scripting, rendering, ecc. |
| `Tab Bottom-Up` | Funzioni più costose per prime |
| `Tab Call Tree` | Gerarchia chiamate dalla radice alla foglia |
| `Tab Event Log` | Lista eventi in ordine cronologico |

## Application

### Storage

| Command | Description |
|---------|-------------|
| `Local Storage` | Visualizza/modifica coppie chiave-valore per origine |
| `Session Storage` | Visualizza/modifica storage di sessione |
| `IndexedDB` | Ispeziona object store e record |
| `Cookies` | Visualizza/modifica/elimina cookie per dominio |
| `Cache Storage` | Ispeziona cache Service Worker |
| `Pulisci storage` | Pulisce in blocco i tipi di storage selezionati |

### Service Worker e Manifest

| Command | Description |
|---------|-------------|
| `Service Workers` | Visualizza registrazione, stato, push/sync |
| `Aggiorna al ricaricamento` | Forza aggiornamento SW ad ogni ricaricamento |
| `Bypassa per la rete` | Salta SW e vai alla rete |
| `Manifest` | Visualizza dettagli web app manifest |
| `Casella Offline` | Simula modalità offline |

## Lighthouse

### Eseguire Audit

| Command | Description |
|---------|-------------|
| `Modalità: Navigation` | Audit completo del caricamento pagina |
| `Modalità: Timespan` | Audit interazioni utente nel tempo |
| `Modalità: Snapshot` | Audit dello stato corrente della pagina |
| `Categorie` | Performance, Accessibilità, Best Practice, SEO |
| `Dispositivo` | Simulazione Mobile o Desktop |

### Metriche Principali

| Command | Description |
|---------|-------------|
| `FCP (First Contentful Paint)` | Tempo al primo contenuto visibile |
| `LCP (Largest Contentful Paint)` | Tempo all'elemento visibile più grande |
| `TBT (Total Blocking Time)` | Somma del tempo bloccante dei task lunghi |
| `CLS (Cumulative Layout Shift)` | Punteggio di stabilità visuale |
| `SI (Speed Index)` | Velocità con cui il contenuto viene popolato visualmente |
| `INP (Interaction to Next Paint)` | Reattività all'input utente |

## Scorciatoie

### Apertura DevTools

| Command | Description |
|---------|-------------|
| `F12 / Ctrl+Shift+I` | Apri/chiudi DevTools |
| `Ctrl+Shift+J` | Apri pannello Console |
| `Ctrl+Shift+C` | Apri Elements + modalità ispezione |
| `Ctrl+Shift+M` | Attiva/disattiva toolbar dispositivo (responsive) |

### Navigazione e Ricerca

| Command | Description |
|---------|-------------|
| `Ctrl+Shift+P` | Menu Comandi (esegui qualsiasi azione) |
| `Ctrl+P` | Apri file (Vai al file) |
| `Ctrl+Shift+F` | Cerca in tutte le sorgenti |
| `Ctrl+G` | Vai al numero di riga in Sources |
| `Ctrl+[ / Ctrl+]` | Passa tra i pannelli |

### Modifica e Console

| Command | Description |
|---------|-------------|
| `Ctrl+Shift+D` | Alterna posizione dock DevTools |
| `Ctrl+L (Console)` | Pulisce output console |
| `Shift+Enter (Console)` | Input su più righe |
| `Esc` | Alterna il cassetto console |
| `Ctrl+K (Console)` | Pulisce console |

## Debug Mobile

### Toolbar Dispositivo

| Command | Description |
|---------|-------------|
| `Ctrl+Shift+M` | Attiva/disattiva toolbar dispositivo |
| `Menu dispositivo` | Dimensioni preset telefono/tablet |
| `Modalità Responsive` | Ridimensiona liberamente il viewport |
| `Menu DPR` | Cambia device pixel ratio |
| `Throttling` | Simula CPU + rete mobile |
| `Mostra media query` | Visualizza breakpoint CSS |

### Debug Remoto (Android)

| Command | Description |
|---------|-------------|
| `1. Abilita debug USB` | Impostazioni -> Opzioni sviluppatore sul dispositivo |
| `2. Connetti USB` | Connetti dispositivo Android al computer |
| `3. chrome://inspect` | Apri in Chrome desktop |
| `4. Clic su Inspect` | Apri DevTools per la pagina mobile |

*Richiede Chrome sia su desktop che su Android*

### Override Sensori

| Command | Description |
|---------|-------------|
| `Geolocalizzazione` | Override coordinate GPS |
| `Orientamento` | Simula orientamento dispositivo |
| `Touch` | Simula eventi touch |
| `Rilevamento inattività` | Override dell'API di rilevamento inattività |

## Pattern Comuni

### Debug Problemi di Rete

```
// In Console: monitora tutte le richieste fetch
const origFetch = window.fetch;
window.fetch = (...args) => {
  console.log('fetch:', args);
  return origFetch(...args);
};
```

### Workflow Performance

| Command | Description |
|---------|-------------|
| `1. Audit Lighthouse` | Identifica i principali problemi di performance |
| `2. Registrazione Performance` | Trova task lunghi nel flame chart |
| `3. Tab Coverage` | Trova CSS/JS inutilizzati (Ctrl+Shift+P -> Coverage) |
| `4. Waterfall Network` | Identifica risorse bloccanti |
| `5. Tab Rendering` | Visualizza paint/layout (Ctrl+Shift+P -> Rendering) |

### Snippet Console Utili

```
// Elenca tutti gli event listener sull'elemento
getEventListeners($0);

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