Elements: ispeziona e modifica dal vivo
L’albero DOM vivo della pagina con stili calcolati, ereditarietà e box model. Cambi un valore e il dispositivo ridisegna all’istante: la via più rapida per un bug di layout mobile.
Fai il debug delle pagine web del telefono dal computer
Come premere F12 sul tuo browser, ma sulle pagine aperte su un iPhone o un Android reale: schede del browser o la WebView / H5 dentro un’app. Ispezione degli elementi, errori in console, breakpoint nei sorgenti, richieste di rete, cookie e storage locale.
- Richieste delle WebView in-app
- Richieste del browser
- Schermo del dispositivo accanto
- Senza rebuild dell’app
Debug web su mobile, senza il solito giro largo
Tutto quello che segue è la normale giornata di chi fa debug su una pagina del telefono. La colonna di sinistra è come va di solito.
| Cosa vuoi fare | Il modo abituale | Con l’ispettore web |
|---|---|---|
| Il layout si rompe solo sul telefono | Indovinare la correzione, ricompilare, pubblicare e riguardare | Modificare elemento e CSS dal vivo e vedere il dispositivo aggiornarsi all’istante |
| Pagina bianca o un pulsante che non fa niente | Sul telefono non c’è console, quindi si riempie di alert e log | Errori e log esattamente come li ha generati la pagina |
| Capire quale riga di JavaScript ha lanciato una richiesta | Uno strumento di cattura mostra la richiesta, mai chi l’ha fatta | Breakpoint ed esecuzione passo passo in Sources, con le variabili sotto gli occhi |
| Vedere cosa c’è davvero nei cookie e nel localStorage | Dedurlo dagli header della richiesta | Tabelle complete — nome, valore, dominio, scadenza, Secure, HttpOnly, SameSite — modificabili |
| Fare debug di una pagina H5 dentro un’app | Sepolta nel traffico, senza modo di agganciarsi | Elencata sotto l’app che la contiene: la scegli e la debugghi come qualunque pagina |
| Far semplicemente funzionare il debug da remoto | Impostazioni diverse per piattaforma, punti d’accesso nascosti, passaggi noiosi | Una sola finestra: scegli il dispositivo, scegli la pagina, premi Debug |
| Leggere insieme traffico e stato della pagina | Uno strumento di cattura e un debugger, affiancati e scollegati | Entrambi in un unico strumento: la richiesta decifrata e il codice che l’ha inviata |
Veri strumenti per sviluppatori, puntati sul dispositivo
Non un visualizzatore ridotto: gli stessi pannelli che usi sul desktop, agganciati alla pagina che gira sul telefono.
Console: errori e REPL dal vivo
Tutti gli errori e i log prodotti dalla pagina, più un prompt che esegue il tuo JavaScript dentro quella pagina, su quel dispositivo. Basta debug a colpi di alert().
Sources: breakpoint e passo passo
Sfoglia gli script e i fogli di stile caricati, metti breakpoint, risali lo stack delle chiamate e ispeziona le variabili nell’istante esatto in cui qualcosa va storto.
Network: ogni richiesta, a cascata
Stato, tipo, origine, dimensione, tempi e cache per ogni richiesta, con i totali di richieste, byte trasferiti, DOMContentLoaded e tempo di caricamento completo.
Storage: cookie, local e sessione
Cookie raggruppati per dominio con scadenza, Secure, HttpOnly e SameSite, accanto a localStorage e sessionStorage: il modo più veloce per sbrogliare un problema di sessione.
Lo schermo del dispositivo sul tuo
Su Android la pagina viva è riprodotta accanto ai pannelli e la comandi con il mouse: ispezione e uso sullo stesso schermo, senza passare dal telefono alla tastiera.
Che aspetto ha
Sessioni reali su un telefono reale, niente di costruito.
Cosa puoi debuggare
Telefoni, tablet, emulatori e simulatori, più un browser sulla tua macchina.
| Questo computer | iOS | Android | |
|---|---|---|---|
| Schede del browser | ✓ | ✓ | ✓ |
| Pagine dentro le app (WebView / WKWebView / H5) | ✓ | ✓ | ✓ |
| Emulatore / simulatore | — | ✓ | ✓ |
| Ispezionare e modificare elementi e stili dal vivo | ✓ | ✓ | ✓ |
| Console, breakpoint ed esecuzione passo passo | ✓ | ✓ | ✓ |
| Cascata di rete della pagina | ✓ | ✓ | ✓ |
| Cookie / localStorage / sessionStorage | ✓ | ✓ | ✓ |
| Schermo del dispositivo accanto ai pannelli | — | — | ✓ |
| Nessun certificato e nessun proxy da configurare | ✓ | ✓ | ✓ |
La 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 e tieni il dispositivo sbloccato. Per Safari attiva Impostazioni → Safari → Avanzate → Web Inspector; per Chrome, Impostazioni Chrome → Impostazioni contenuti → Web Inspector.
Dispositivo Android
Collega il cavo e attiva il debug USB nelle opzioni sviluppatore. Gli emulatori 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.
Anche una pagina dentro un’app? Ancora una cosa
Saltalo se ti bastano le schede del browser. La tua app: su Android chiama una volta setWebContentsDebuggingEnabled(true); da iOS 16.4 imposta isInspectable = true sulla WKWebView. App di altri, o senza toccare il codice: spunta «Includi anche le pagine dentro le app» e finiscono in elenco anche le pagine delle app aperte — serve un Android con root e su iOS funziona solo con app firmate per lo sviluppo.
Fatto questo, ogni sessione è solo così
Nuova cattura → destinazione (Questo computer / iOS / Android) → metodo «Web Inspector» → Aggiorna → scegli la pagina → Inspect. Nel browser si aprono strumenti per sviluppatori completi; puoi aprirne quante vuoi in parallelo.
Anche le pagine nascoste dentro le app
Quasi tutte le app sono metà native e metà web. È in quelle pagine H5 incorporate che si annidano i bug più scomodi, ed è lì che gli strumenti comuni non ti danno nulla.
Raggruppate per app
L’elenco delle pagine è organizzato per app: distingui a colpo d’occhio una pagina di pagamento dentro l’app da una scheda del browser e ti agganci esattamente a quella giusta.
Basta una spunta
«Includi anche le pagine dentro le app» aggiunge all’elenco le pagine delle app aperte in quel momento. Togli la spunta e restano solo le schede del browser.
Non lascia tracce
Non ricompili l’app, non firmi nulla e non installi alcun componente sul dispositivo. Finita la sessione, il dispositivo torna com’era.
Si abbina alla cattura del traffico
Debugghi la pagina qui e catturi il traffico della stessa app nello stesso strumento: HTTPS decifrato, anche per app con certificate pinning o che ignorano il proxy di sistema.
Debug web su mobile: domande frequenti
Come ispeziono un elemento sul telefono?
Collega il telefono al computer via USB, apri Trace Eagle, scegli Nuova cattura → iOS o Android → metodo «Ispettore web», seleziona la pagina e premi Debug. Sul computer si apre un pannello Elements completo con il DOM e il CSS dal vivo della pagina sul dispositivo; se modifichi un valore lì, la pagina sul telefono cambia subito.
Posso fare debug di una WebView Android senza modificare l’app?
Sì. Le WebView che già consentono il debug compaiono direttamente nell’elenco. Per le app che non le espongono, spunta «Includi anche le pagine dentro le app» e vengono aggiunte le pagine delle app aperte: serve un dispositivo con root, ma non si ricompila, non si riconfeziona e non si installa nulla in modo permanente.
Come faccio il debug di una pagina web su iPhone o iPad?
Collega il dispositivo, sbloccalo e attiva Impostazioni → Safari → Avanzate → Web Inspector (oppure Impostazioni di Chrome → Impostazioni contenuti → Web Inspector). Poi scegli dispositivo e pagina in Trace Eagle e premi Debug: l’ispettore web completo si apre nel browser del computer, con Elements, Console, Sources, Network, Storage, Layers e altro.
È la stessa cosa di chrome://inspect?
Fa lo stesso lavoro e qualcosa in più, in un’unica finestra. La pagina di debug remoto del browser gestisce solo bersagli Chromium su Android; qui iOS, Android e il browser locale stanno nello stesso selettore, le pagine sono raggruppate per app, le H5 incorporate si aggiungono con una spunta, e accanto c’è uno strumento di cattura che decifra il traffico HTTPS della stessa app.
Servono jailbreak o root?
No per il debug normale: schede del browser e app che già lo consentono funzionano su un dispositivo di serie. Solo l’opzione aggiuntiva che include le pagine delle app di terze parti richiede un Android con root; su iOS è il sistema a decidere quali app si possono includere.
Servono un certificato, un proxy o un SDK nell’app?
Nessuno dei tre. Il debug web da remoto passa dal collegamento USB: nessun proxy da configurare, nessun certificato radice da installare sul dispositivo, nessun SDK o libreria da aggiungere all’app.
In cosa è diverso dalla cattura del traffico?
La cattura risponde a cosa è passato in rete: richiesta, risposta, header e corpo, decifrati. L’ispettore web risponde a cosa ha fatto la pagina: DOM, stili, errori in console, quale script ha lanciato la richiesta e cosa c’era già nei cookie e nello storage. Trace Eagle ha entrambi, così passi dall’uno all’altro senza cambiare strumento.
Con quale browser si apre la finestra di debug?
Le sessioni Android e del browser locale si aprono in Chrome, Edge o Brave (Trace Eagle ne avvia uno per te); quelle iOS funzionano in qualsiasi browser.
Funziona con emulatori e simulatori?
Sì. Gli emulatori Android vengono di solito rilevati senza cavo, e anche i simulatori iOS in esecuzione sulla macchina: la procedura è identica a quella di un dispositivo fisico.
L’ispettore web è gratuito?
Sì. Come tutto il resto di Trace Eagle è completamente gratuito su macOS, Windows e Linux, senza funzioni a pagamento.