Debug remoto dei dispositivi Android

Kayce Basques

Sofia Emelianova

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

• Configura il tuo dispositivo Android per il debug remoto e scoprilo dal tuo computer di sviluppo.
• Esamina ed esegui il debug dei contenuti live sul tuo dispositivo Android dal computer di sviluppo.
• Registra i contenuti del tuo dispositivo Android in un'istanza DevTools sulla macchina di sviluppo.

Passaggio 1: individua il tuo dispositivo Android

Il flusso di lavoro descritto di seguito funziona per la maggior parte degli utenti. Consulta Risoluzione dei problemi: DevTools non rileva il dispositivo Android per ulteriore assistenza.

1. Apri la schermata Opzioni sviluppatore su Android. Vedi Configura le opzioni per sviluppatori sul dispositivo.
2. Seleziona Abilita debug USB.
3. Apri Chrome sul computer 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 al computer di sviluppo tramite un cavo USB.

7. Se stai connettendo il dispositivo per la prima volta, il dispositivo risulterà "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 che la connessione al dispositivo è stata stabilita.

   

9. Vai al Passaggio 2.

Risoluzione dei problemi: DevTools non rileva il dispositivo Android

Assicurati di aver configurato correttamente l'hardware:

• Se utilizzi un hub USB, prova a collegare il dispositivo Android direttamente al computer di sviluppo.
• Prova a scollegare il cavo USB tra il dispositivo Android e il computer di sviluppo, quindi a ricollegarlo. Fallo mentre gli schermi delle macchine Android e di sviluppo sono sbloccati.
• Assicurati che il cavo USB funzioni. Dovresti poter controllare i file sul tuo dispositivo Android dal computer di sviluppo.

Assicurati che il software sia configurato correttamente:

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

Se non viene visualizzata la richiesta Consenti debug USB sul tuo dispositivo Android, prova a procedere nel seguente modo:

• Scollega e ricollega il cavo USB mentre DevTools è attivo sulla macchina di sviluppo e viene visualizzata la schermata Home di Android. In altre parole, a volte la richiesta non viene visualizzata quando gli schermi dei computer Android o di sviluppo sono bloccati.
• Aggiornamento delle impostazioni di visualizzazione del dispositivo Android e del computer di sviluppo in modo che non venga mai attivata la modalità di 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 dispositivo Android per ripristinare lo stato aggiornato.

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 su Stack Overflow o apri un problema nel repository developer.chrome.com.

Passaggio 2: esegui il debug dei contenuti sul tuo dispositivo Android dal computer di sviluppo

1. Apri Chrome sul tuo dispositivo Android.

2. In chrome://inspect/#devices sulla macchina di sviluppo, vedrai il nome del modello del tuo dispositivo Android, seguito dal suo numero di serie. Sotto è indicata 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 dispositivo Android.

   

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

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 tuo computer di sviluppo. Pertanto, se il tuo dispositivo Android utilizza una versione obsoleta 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 dell'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 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 l'opzione Seleziona elemento viene disattivata dopo il primo tocco, quindi devi riattivarla ogni volta che vuoi usare questa funzionalità.

Registra lo schermo del tuo dispositivo Android sul tuo computer 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 convertiti in tocchi e attivano gli eventi di tocco appropriati sul dispositivo.
• Le sequenze di tasti sul computer vengono inviate al dispositivo.
• Per simulare il gesto di pizzicatura, tieni premuto Maiusc durante il trascinamento.
• Per scorrere, usa 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, la barra di stato o la tastiera 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 pagina.
• Se lo schermo del tuo 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 DevTools di Chrome (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 al tuo computer di sviluppo tramite:

   • Un cavo USB (dritto).
   • 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. Dopo aver eseguito la connessione, verifica quanto segue:

   • 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.
   • Il campo chrome://inspect/#devices è compilato, anche se l'impostazione Rileva dispositivi USB è selezionata.

Per la risoluzione dei problemi, vedi:

• Documentazione di adb

• Se vuoi, puoi leggere le guide più vecchie:

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