Ispettore web

Un layout che si rompe solo sul telefono, un pulsante che non risponde, una pagina H5 che resta bianca — sul computer basta premere F12 per capire subito perché. Sul telefono di solito restano solo alert, ricompilare e riguardare. L’ispettore web collega proprio questi strumenti per sviluppatori alla pagina reale sul dispositivo: colleghi il cavo e Elements, Console, Sources, Network e Storage compaiono sul computer, con il dispositivo che si ridisegna appena cambi un valore.

Ispettore web durante il debug di una pagina Android: a sinistra lo schermo del dispositivo dal vivo, a destra il pannello Elements con gli stili applicati

1. Come si divide il lavoro con la cattura dei pacchetti

Servono entrambi, ma rispondono a domande diverse:

	Cattura dei pacchetti	Ispettore web
Risponde a	Cosa è passato sulla rete	Cosa ha fatto la pagina
Mostra	Richieste / risposte, header, body (decifrati)	Albero DOM, stili applicati, errori in console, call stack, cookie e storage
Domanda tipica	Cosa restituisce questo endpoint, i parametri sono giusti	Quale riga di JavaScript ha inviato questa richiesta, perché quello stile non si applica

La cattura mostra la richiesta ma mai chi l’ha generata; l’ispettore mette un breakpoint in Sources e riporta esattamente a quella riga. Sono nello stesso strumento, quindi passare dall’uno all’altro non costa nulla.

2. Preparazione da fare una volta sola

I tre blocchi qui sotto sono alternative: fai quello che corrisponde al tuo bersaglio, e una volta sola.

Dispositivo iOS

Collega il cavo, tieni il dispositivo sbloccato, e attiva l’interruttore dell’ispettore web:

Safari: Impostazioni → Safari → Avanzate → Web Inspector
Chrome: Impostazioni Chrome → Impostazioni contenuti → Web Inspector

È il passaggio che si dimentica più spesso su iOS. Senza, il dispositivo viene rilevato ma l’elenco delle pagine resta vuoto.

Dispositivo Android

Collega il cavo e attiva il debug USB nelle opzioni sviluppatore. Gli emulatori Android di solito si fanno trovare anche senza cavo.

Browser di questo computer

Avvia Chrome o Edge con --remote-debugging-port=9222, poi premi Aggiorna nell’elenco delle pagine.

# macOS
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --remote-debugging-port=9222

# Windows
"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222

3. Anche una pagina dentro un’app? Ancora una cosa

Se ti bastano le schede del browser, puoi saltare questa sezione.

La tua app: attivalo una volta nel codice.

// Android: da chiamare una volta all'avvio di Application o Activity
WebView.setWebContentsDebuggingEnabled(true);

// Da iOS 16.4: rendi ispezionabile la WKWebView
webView.isInspectable = true

App di altri, o senza toccare il codice: spunta «Includi anche le pagine dentro le app» nella finestra di dialogo, e le pagine delle app aperte entrano in elenco. Deseleziona e restano solo le schede del browser.

	Requisito	Nota
Android	Un dispositivo con root	Attiva il debug WebView sulle app in esecuzione, senza ricompilare nulla
iOS	Solo app firmate per lo sviluppo	Limite di sistema — le app installate dall’App Store non possono essere incluse

In entrambi i casi, l’app non viene mai ricompilata, firmata, né si installa nulla di ausiliario sul dispositivo. Finita la sessione, il dispositivo torna com’era.

4. Avviare il debug

Fatto questo, ogni sessione si riduce a questo:

Nuova cattura → destinazione (Questo computer / iOS / Android) → metodo «Web Inspector» → Aggiorna → scegli la pagina → Inspect

Finestra di dialogo Nuova cattura con Android e il metodo Web Inspector selezionati, con l’elenco delle pagine ispezionabili dopo aver spuntato «Includi anche le pagine dentro le app»

Le pagine sono raggruppate per l’app proprietaria, così una pagina dentro un’app si distingue a colpo d’occhio da una scheda del browser.
Premendo Inspect si aprono strumenti per sviluppatori completi nel browser del computer, collegati a quella pagina su quel dispositivo.
Aprine quante vuoi in parallelo — una finestra per pagina, tutte attive insieme.

5. Cosa si vede

Gli stessi pannelli che usi ogni giorno sul computer, puntati sulla pagina del telefono.

Pannello	Cosa permette
Elements	L’albero DOM dal vivo della pagina, con stili applicati, ereditarietà e box model. Cambia un valore e il dispositivo si ridisegna sul momento — il modo più rapido per individuare un bug di layout mobile
Console	Ogni errore e log prodotto dalla pagina, più un prompt che esegue JavaScript direttamente in quella pagina su quel dispositivo
Sources	Sfoglia gli script e i fogli di stile caricati dalla pagina, imposta breakpoint, segui la call stack e ispeziona le variabili nel momento esatto del problema
Network	Ogni richiesta della pagina a cascata: stato, tipo, iniziatore, dimensione, tempi e stato della cache, con i totali di richieste, byte trasferiti, DOMContentLoaded e tempo di caricamento completo
Storage	Cookie raggruppati per dominio con scadenza, Secure, HttpOnly e SameSite, accanto a localStorage e sessionStorage — il modo più rapido per risolvere un bug di stato di accesso

Pannello Storage dell’ispettore web: tabella dei cookie per una pagina aperta su un iPhone, con valore, dominio, scadenza, Secure, HttpOnly e SameSite

Su Android, lo schermo del dispositivo dal vivo viene mostrato accanto ai pannelli e si può cliccare e scorrere con il mouse — ispezione e uso avvengono su un solo schermo, senza destreggiarsi tra telefono e tastiera.

6. Cosa è supportato

	Questo computer	iOS	Android
Schede del browser	✓	✓	✓
Pagine dentro le app (WebView / WKWebView / H5)	✓	✓	✓
Emulatore / simulatore	—	✓	✓
Ispeziona e modifica elementi e stili dal vivo	✓	✓	✓
Console, breakpoint ed esecuzione passo-passo	✓	✓	✓
Cascata di rete per la pagina	✓	✓	✓
Cookie / localStorage / sessionStorage	✓	✓	✓
Schermo del dispositivo accanto ai pannelli	—	—	✓
Nessun certificato né proxy da configurare	✓	✓	✓

7. Non appare nulla? Controlla prima questo

Sintomo	Di solito	Cosa fare
Dispositivo rilevato, elenco pagine vuoto	Web Inspector su iOS disattivato, o schermo bloccato	Segui la sezione 2, attivalo, tieni sbloccato e premi Aggiorna
Android non mostra pagine dentro le app	Quella WebView non ha mai avuto il debug attivo	La tua app: aggiungi `setWebContentsDebuggingEnabled(true)`; app di altri: spunta «Includi anche le pagine dentro le app» (serve root)
Una specifica app iOS non compare mai	Un limite di sistema	Le build dell’App Store non possono essere incluse — solo le app firmate per lo sviluppo
Il browser locale non elenca pagine	Avviato senza la porta di debug	Riavvia Chrome / Edge con `--remote-debugging-port=9222` e premi Aggiorna
Inspect non fa nulla	Un browser non supportato	Le sessioni Android e locali richiedono Chrome, Edge o Brave

8. Quando usarlo

Un bug che si presenta solo sul telefono: layout, aree di tocco, rendering dei font.
Una pagina H5 resta bianca o rotta e serve vedere errori in console e call stack.
Vuoi sapere quale script ha inviato una richiesta — la sola cattura non lo dice.
Stai inseguendo un problema di login o cache e devi vedere cosa c’è davvero in cookie e storage.
Stai facendo il debug di H5 incorporato in un’app — gli strumenti comuni qui non danno accesso a nulla.

Torna a Per iniziare · Correlati: Ispeziona e decodifica · Cattura iOS · Cattura Android