Debug remoto dei dispositivi Android

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

• Configura il tuo dispositivo Android per il debug remoto e rilevalo dalla tua macchina di sviluppo.
• Ispeziona ed esegui il debug dei contenuti dal vivo sul tuo dispositivo Android dalla tua macchina di sviluppo.
• Registra lo schermo dei contenuti dal tuo dispositivo Android su un'istanza DevTools sulla macchina di sviluppo.

Passaggio 1: rileva il tuo dispositivo Android

Il flusso di lavoro seguente funziona per la maggior parte degli utenti. Per ulteriore assistenza, consulta la sezione Risoluzione dei problemi: DevTools non rileva il dispositivo Android.

1. Apri la schermata Opzioni sviluppatore su Android. Vedi Configurare le opzioni per sviluppatori on-device.
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 tuo dispositivo Android direttamente alla macchina di sviluppo tramite un cavo USB.

7. Se stai collegando il dispositivo per la prima volta, il dispositivo verrà visualizzato come "Offline" e in attesa di autenticazione.

   

   In questo caso, accetta la richiesta 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 usi un hub USB, prova invece 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, quindi ricollegalo. Fallo mentre gli schermi Android e della macchina di sviluppo sono sbloccati.
• Assicurati che il cavo USB funzioni. Dovresti riuscire a ispezionare i file sul dispositivo Android dalla macchina di sviluppo.

Assicurati che il software sia configurato correttamente:

• Se sul computer di sviluppo è installato Windows, prova a installare manualmente i driver USB del dispositivo Android. Vedi Installare i driver USB OEM.
• Alcune combinazioni di dispositivi Windows e Android (in particolare Samsung) richiedono una configurazione aggiuntiva. Vedi I dispositivi Chrome DevTools non rilevano il dispositivo quando sono collegati.

Se non vedi il messaggio Consenti il debug USB sul tuo dispositivo Android, prova a procedere nel seguente modo:

• Disconnettere e ricollegare il cavo USB mentre DevTools è concentrato sulla macchina di sviluppo e nella schermata Home di Android è visualizzata. In altre parole, a volte il prompt non viene visualizzato quando gli schermi Android o della macchina di sviluppo sono bloccati.
• Aggiornamento delle impostazioni di visualizzazione del dispositivo Android e della macchina di sviluppo in modo che non vadano mai in sospensione.
• Imposto la modalità USB di Android su PTP. Vedi Galaxy S4 non mostra la finestra di dialogo Autorizza debug USB.
• Seleziona Revoca autorizzazioni di debug USB dalla schermata Opzioni sviluppatore sul tuo dispositivo Android per ripristinare lo stato precedente.

Se trovi una soluzione non menzionata in questa sezione o in I dispositivi Chrome DevTools non rilevano il dispositivo quando sono collegati, aggiungi una risposta alla 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 tuo dispositivo Android.

2. In chrome://inspect/#devices sulla macchina di sviluppo vedrai 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 fai clic su Apri. La pagina si apre in una nuova scheda sul tuo dispositivo Android.

   

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

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

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

Altre azioni: mettere in pausa, impostare lo stato attivo, ricaricare o chiudere una scheda

Sotto l'URL puoi trovare un menu per mettere in pausa, impostare lo stato attivo, ricaricare o chiudere una scheda.

Ispeziona elementi

Vai al riquadro Elementi della tua istanza DevTools e passa il mouse sopra un elemento per evidenziarlo nell'area visibile del tuo dispositivo Android.

Puoi anche toccare un elemento sullo schermo del dispositivo Android per selezionarlo nel riquadro Elementi. Fai clic su Seleziona elemento sulla tua istanza DevTools e tocca l'elemento sullo schermo del dispositivo Android. Tieni presente che l'opzione Seleziona elemento è disattivata dopo il primo tocco, quindi dovrai riattivarla ogni volta che vuoi utilizzare questa funzionalità.

Registra lo schermo Android sulla tua macchina di sviluppo

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

Puoi interagire con lo screencast in diversi modi:

• I clic vengono tradotti in tocchi, attivando gli eventi di tocco appropriati sul dispositivo.
• Le sequenze di tasti sul computer vengono inviate al dispositivo.
• Per simulare un gesto di pizzicatura, tieni premuto Maiusc durante il trascinamento.
• Per scorrere, utilizza il trackpad o la rotellina del mouse oppure scorri con il puntatore del mouse.

Alcune note sugli screencast:

• Gli screencast mostrano solo i contenuti della pagina. Le parti trasparenti dello screencast rappresentano le interfacce dei dispositivi, ad esempio la barra degli indirizzi di Chrome, la barra di stato di Android o la tastiera di Android.
• Gli screencast influiscono negativamente sulle frequenze fotogrammi. Disattiva lo screencast durante la misurazione di scorrimenti o animazioni per avere un quadro più preciso del rendimento della tua pagina.
• Se lo schermo del dispositivo Android si blocca, i contenuti dello screencast scompaiono. Sblocca lo schermo del tuo dispositivo Android per riprendere automaticamente lo screencast.

Debug manuale tramite Android Debug Bridge (adb)

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

A tale scopo, 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 dispositivo è presente nell'elenco.

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

   adb forward tcp:9222 localabstract:chrome_devtools_remote
   

6. Una volta stabilita la connessione, controlla che:

   • http://localhost:9222/json elenca i page target.
   • http://localhost:9222/json/version espone l'endpoint di destinazione browser, come indica la documentazione CDP.
   • Il campo chrome://inspect/#devices è compilato, anche se l'impostazione Rileva dispositivi USB non è selezionata.

Per la risoluzione dei problemi, vedi:

• Documentazione di adb

• Facoltativamente, puoi leggere le guide precedenti:

  • remote-debugging-legacy
  • debug-remoto
  • girish.in/...come