Debug remoto dei dispositivi Android

Kayce Basques

Sofia Emelianova

Esegui il debug remoto dei contenuti live su un dispositivo Android dal tuo computer Windows, Mac o Linux. Questo tutorial ti insegna a:

• Configura il tuo dispositivo Android per il debug remoto e scoprilo dalla tua macchina di sviluppo.
• Ispeziona ed esegui il debug dei contenuti live sul tuo dispositivo Android dalla tua macchina di sviluppo.
• Trasmetti i contenuti di Registra schermo dal tuo dispositivo Android a un'istanza di DevTools sulla tua macchina di sviluppo.

Passaggio 1: scopri il tuo dispositivo Android

Il flusso di lavoro riportato di seguito è adatto alla maggior parte degli utenti. Per ulteriore assistenza, consulta Risoluzione dei problemi: DevTools non rileva il dispositivo Android.

1. Apri la schermata Opzioni sviluppatore su Android. Consulta Configurare le opzioni sviluppatore sul dispositivo.
2. Seleziona Attiva debug USB.
3. Apri Chrome sulla macchina di sviluppo.
4. Vai a chrome://inspect#devices.

5. Assicurati che l'opzione Rileva dispositivi USB sia attiva.

   

6. Collega il dispositivo Android direttamente alla macchina di sviluppo utilizzando un cavo USB.

7. Se connetti il dispositivo per la prima volta, questo verrà visualizzato come "Offline" e l'autenticazione sarà in attesa.

   

   In questo caso, accetta il prompt della sessione di debug sullo schermo del dispositivo.

8. Se vedi il nome del modello del tuo dispositivo Android, DevTools ha stabilito correttamente la connessione al dispositivo.

   

9. Vai al passaggio 2.

Risoluzione dei problemi: DevTools non rileva il dispositivo Android

Assicurati che l'hardware sia configurato correttamente:

• Se utilizzi un hub USB, prova a collegare il dispositivo Android direttamente alla macchina di sviluppo.
• Prova a scollegare il cavo USB tra il dispositivo Android e la macchina di sviluppo e a ricollegarlo. Esegui questa operazione mentre gli schermi di Android e della macchina di sviluppo sono sbloccati.
• Assicurati che il cavo USB funzioni. Dovresti essere in grado di esaminare i file sul tuo dispositivo Android dal tuo computer di sviluppo.

Assicurati che il software sia configurato correttamente:

• Se la tua macchina di sviluppo esegue Windows, prova a installare manualmente i driver USB per il tuo dispositivo Android. Consulta Installare i driver USB OEM.
• Alcune combinazioni di dispositivi Windows e Android (soprattutto Samsung) richiedono una configurazione aggiuntiva. Vedi Chrome DevTools Devices non rileva il dispositivo quando è collegato.

Se non vedi il prompt Consenti il debug USB sul tuo dispositivo Android, prova a:

• Scollegare e ricollegare il cavo USB mentre DevTools è in primo piano sulla macchina di sviluppo e viene visualizzata la schermata Home di Android. In altre parole, a volte il prompt non viene visualizzato quando gli schermi del dispositivo Android o della macchina di sviluppo sono bloccati.
• Aggiornamento delle impostazioni dello schermo per il dispositivo Android e la macchina di sviluppo in modo che non vadano mai in modalità sospensione.
• Impostazione della modalità USB di Android su PTP. Consulta Galaxy S4 non mostra la finestra di dialogo Autorizza debug USB.
• Seleziona Revoca autorizzazioni debug USB dalla schermata Opzioni sviluppatore sul tuo dispositivo Android per ripristinarlo.

Se trovi una soluzione non menzionata in questa sezione o in Chrome DevTools Devices does not detect device when plugged in, aggiungi una risposta a questa domanda di Stack Overflow o apri un problema nel repository developer.chrome.com.

Passaggio 2: esegui il debug dei contenuti sul tuo dispositivo Android dalla macchina di sviluppo

1. Apri Chrome sul dispositivo Android.

2. In chrome://inspect/#devices sulla macchina di sviluppo, viene visualizzato il nome del modello del dispositivo Android, seguito dal numero di serie. Sotto, puoi vedere la versione di Chrome in esecuzione sul dispositivo, con il numero di versione tra parentesi.

   

3. Nella casella di testo Apri scheda con URL, inserisci un URL e poi fai clic su Apri. La pagina si apre in una nuova scheda sul tuo dispositivo Android.

   

   Ogni scheda di Chrome remota ha una propria sezione in chrome://inspect/#devices. In questa sezione puoi interagire con la scheda. Se sono presenti app che utilizzano WebView, vedrai anche una sezione per ciascuna di queste app. In questo esempio è aperta una sola scheda.

4. Fai clic su Controlla accanto all'URL appena aperto. Si apre una nuova istanza di DevTools.

La versione di Chrome in esecuzione sul tuo dispositivo Android determina la versione di DevTools che si apre sul tuo computer di sviluppo. Pertanto, se il tuo dispositivo Android esegue una versione molto precedente di Chrome, l'istanza di DevTools potrebbe avere un aspetto molto diverso da quello a cui sei abituato.

Altre azioni: mettere in pausa, mettere a fuoco, ricaricare o chiudere una scheda

Sotto l'URL puoi trovare un menu per mettere in pausa, mettere in evidenza, ricaricare o chiudere una scheda.

Ispeziona elementi

Vai al riquadro Elementi dell'istanza di DevTools e passa il mouse sopra un elemento per evidenziarlo nella viewport del tuo dispositivo Android.

Puoi anche toccare un elemento sullo schermo del tuo dispositivo Android per selezionarlo nel riquadro Elementi. Fai clic su Seleziona elemento nell'istanza di DevTools, quindi tocca l'elemento sullo schermo del dispositivo Android. Tieni presente che Seleziona elemento viene disattivato dopo il primo tocco, quindi devi riattivarlo ogni volta che vuoi utilizzare questa funzionalità.

Trasmettere lo schermo di Android alla macchina di sviluppo

Fai clic su Attiva/disattiva Screencast per visualizzare i contenuti del tuo dispositivo Android nell'istanza di DevTools.

Puoi interagire con la registrazione dello schermo in diversi modi:

• I clic vengono convertiti in tocchi, attivando gli eventi di tocco appropriati sul dispositivo.
• I tasti premuti sul computer vengono inviati al dispositivo.
• Per simulare un gesto di pizzicamento, tieni premuto Maiusc mentre trascini.
• Per scorrere, utilizza il trackpad o la rotellina del mouse oppure scorri rapidamente con il puntatore del mouse.

Alcune note sugli screencast:

• Gli screencast mostrano solo i contenuti della pagina. Le parti trasparenti della registrazione dello schermo rappresentano le interfacce del dispositivo, come la barra degli indirizzi di Chrome, la barra di stato di Android o la tastiera Android.
• Gli screencast influiscono negativamente sui frame rate. Disattiva la registrazione dello schermo durante la misurazione degli scorrimenti o delle animazioni per ottenere un quadro più preciso del rendimento della pagina.
• Se lo schermo del tuo dispositivo Android si blocca, i contenuti della registrazione dello schermo scompaiono. Sblocca lo schermo del tuo dispositivo Android per riprendere automaticamente la trasmissione dello schermo.

Eseguire il debug manualmente tramite Android Debug Bridge (ADB)

In alcuni rari casi, può essere utile un metodo alternativo di debug remoto. Ad esempio, potresti voler connetterti direttamente a Chrome DevTools Protocol (CDP) di Chrome su Android.

Per farlo, puoi utilizzare Android Debug Bridge (adb):

1. Assicurati di attivare le opzioni sviluppatore e il debug USB sul tuo dispositivo Android.
2. Apri Chrome sul tuo dispositivo Android.

3. Collega il dispositivo Android alla macchina di sviluppo tramite:

   • Un cavo USB (semplice).
   • In alternativa, connessione Wi-Fi adb.

4. Nella riga di comando della macchina di sviluppo, esegui adb devices -l e controlla se il tuo dispositivo è presente nell'elenco.

5. Inoltra il socket CDP sul dispositivo alla porta locale della tua macchina, ad esempio 9222. A tal fine, esegui:

   adb forward tcp:9222 localabstract:chrome_devtools_remote
   

6. Una volta stabilita la connessione, verifica che:

   • http://localhost:9222/json elenca i tuoi page target.
   • http://localhost:9222/json/version espone l'endpoint di destinazione browser, come indicato nella documentazione CDP.
   • chrome://inspect/#devices viene compilato, anche senza l'impostazione Rileva dispositivi USB selezionata.

Per la risoluzione dei problemi, vedi:

• Documentazione adb

• Se vuoi, puoi leggere le guide precedenti:

  • remote-debugging-legacy
  • remote-debugging
  • girish.in/…how