RIFERIMENTO RAPIDO CHROME DEVTOOLS
Elements, Console, Network, Performance, debugging
Elements
Ispezione e Modifica
| 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
| 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
| $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
| 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
| 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
| 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
| 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
| 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
| 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
| 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
| 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
| 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
| 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
| 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
| 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
| 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
| 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
| 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
| 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
| 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
| 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)
| 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
| 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
| 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 });