Debug remoto dei dispositivi Android

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

Esegui il debug remoto dei contenuti live su un dispositivo Android da computer Windows, Mac o Linux. Questo il tutorial ti 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.

Diagramma di debug remoto

Passaggio 1: individua il tuo dispositivo Android

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

  1. Apri la schermata Opzioni sviluppatore su Android. Vedi Configurare lo sviluppatore sul dispositivo Opzioni.
  2. Seleziona Abilita debug USB.
  3. Apri Chrome sul computer di sviluppo.
  4. Vai a chrome://inspect#devices.

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

    La casella di controllo Rileva dispositivi USB è attivata.

  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.

    Dispositivo offline 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.

    Un dispositivo connesso correttamente designato con un nome di modello.

  9. Vai al Passaggio 2.

Risoluzione dei problemi: DevTools non rileva il dispositivo Android

Assicurati di aver configurato correttamente l'hardware:

  • Se usi 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 ricollegandolo. Fallo mentre gli schermi delle macchine Android e di sviluppo sono sbloccati.
  • Assicurati che il cavo USB funzioni. Dovresti essere in grado di controllare i file sul tuo dispositivo Android dal tuo computer di sviluppo.

Assicurati che il software sia configurato correttamente:

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

  • Scollegare e ricollegare il cavo USB mentre DevTools è al centro dello sviluppo. computer e la schermata Home di Android. In altre parole, a volte il prompt non mostra quando gli schermi delle macchine Android o di sviluppo sono bloccati.
  • Aggiornamento delle impostazioni di visualizzazione dei dispositivi Android e del computer di sviluppo in modo che andare a dormire.
  • 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 uno stato nuovo.

Se trovi una soluzione non menzionata in questa sezione o in I dispositivi Chrome DevTools non rileva il dispositivo quando è collegato, aggiungi una risposta alla domanda su Stack Overflow o apri un 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 sul tuo computer di sviluppo, vedrai il nome del modello del tuo dispositivo Android, seguito da il suo numero di serie. Qui sotto puoi vedere la versione di Chrome in esecuzione sul dispositivo, con il numero di versione tra parentesi.

    La versione di Chrome installata sul dispositivo.

  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.

    Una scheda remota elencata in una sezione.

    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.

Una nuova istanza DevTools per la scheda remota.

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 di Chrome molto vecchia, 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.

Il menu per mettere in pausa, ricaricare, impostare lo stato attivo o chiudere una scheda.

Ispeziona elementi

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

Puoi anche toccare un elemento sullo schermo del tuo dispositivo Android per selezionarlo nel riquadro Elements. Fai clic su Seleziona elemento 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. Attiva/disattiva Registra schermo per visualizzare il contenuto 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 il dispositivo come 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 degli scorrimenti o per ottenere un quadro più preciso del rendimento della pagina.
  • Se lo schermo del tuo dispositivo Android si blocca, i contenuti dello screencast scompaiono. Sblocca il tuo Lo schermo del 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:

  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: