Test e debug di siti web e applicazioni Web su dispositivi mobili può essere difficile. I browser su telefoni e tablet spesso non dispongono di debugger integrati e l’emulazione dei dispositivi mobili non è mai accurata come desideri. Per eseguire il debug di siti Web mobili su Android, la versione desktop di Chrome fornisce una soluzione con debug remoto.,
Questo articolo ti mostrerà come utilizzare il debug remoto con Chrome dal tuo computer. È possibile utilizzare uno dei più comuni sistemi operativi desktop come Windows, macOS o Linux.
Come eseguire il debug di Android Chrome
Se pensi di avere un bug in un sito Web mobile o in un’app nativa su Android, ma non riesci a bloccarlo, Raygun supporta la segnalazione degli arresti anomali JavaScript e la segnalazione degli arresti anomali di Android. Si può prendere una prova gratuita di 14 giorni qui.
Impostazione
Prima di poter eseguire qualsiasi debug remoto, è necessario impostare il computer per essere in grado di riconoscere il dispositivo Android., Ciò significa consentire debugger di Chrome per riconoscere e allegare al telefono. Si inizierà impostando alcune opzioni sul telefono.
Impostazioni del telefono
Aprire l’app Impostazioni sul telefono. Dovrai abilitare le opzioni sviluppatore se non l’hai già fatto. Per fare ciò, vai al menu “Informazioni sul telefono”, che si trova all’interno del menu di sistema sui moderni dispositivi Android. Una volta che sei lì, scorrere fino in fondo e toccare “Numero di build” sette volte. Ora, torna alla schermata precedente o nel menu “Sistema” nell’app Impostazioni., Lì, troverai una nuova voce di menu denominata “Opzioni sviluppatore” nella parte inferiore.
Una volta che sei dentro Opzioni sviluppatore, abilitarli sul telefono facendo clic sull’interruttore nella parte superiore della pagina. Quando l’interruttore dice “On”, scorri un po ‘ verso il basso e abilita anche “debug USB”. Questo vi permetterà di eseguire il debug del dispositivo tramite una connessione via cavo USB.
Configurazione del computer (utilizzando il debug USB Android)
Installazione del driver
Questo è tutto ciò che possiamo fare al telefono, per ora, quindi prepariamo il nostro computer., I passi da intraprendere sono leggermente diversi su ciascuno dei grandi sistemi operativi.
Se si sta utilizzando Windows la prima cosa che dovete fare è installare i driver USB per il dispositivo. Il sito web di Android Studio ha un elenco di luoghi per trovare i driver insieme ad alcune istruzioni su come installare i driver sul computer. Alcuni produttori forniscono collegamenti a un file di driver. Altri ti portano solo a un sito Web di supporto, nel qual caso dovrai fare un po ‘ di ricerca per trovare i driver per il tuo dispositivo.,
Nel caso in cui il computer esegue macOS o Linux non sarà necessario installare i driver. Gli utenti Mac sono infatti pronti ad andare. Se la tua macchina esegue Linux, sono necessari alcuni passaggi di installazione. Devi assicurarti che il tuo account utente appartenga a un determinato gruppo e dovrai installare un pacchetto con le cosiddette “regole udev”. Sono configurazioni che rendono noti determinati dispositivi USB al tuo computer Linux. Se siete interessati a maggiori dettagli, ho scritto un articolo dedicato sulla configurazione di Linux per ADB qualche tempo fa.,
Installa Android Debug Bridge (ADB)
Una volta installati i driver o le regole udev, avrai anche bisogno di ADB, che fornisce un’interfaccia per parlare con il tuo dispositivo mobile. ADB e altri strumenti della piattaforma Android sono dotati di Android Studio, ma puoi anche scaricarli separatamente.
O utilizzando Android SDK incorporato di Android Studio o il pacchetto di strumenti piattaforma ufficiale di Google sono i modi preferiti per andare. I pacchetti di strumenti della piattaforma sono solo .file zip contenenti una cartella platform-tools., Dopo aver estratto i file troverai file binari comeadb.exe (Windows) oadb (macOS e Linux). È quindi possibile eseguirli se necessario da una shell o da una finestra di terminale a scelta.
Se sei su Windows e vuoi la versione più minimale di ADB senza alcuna lanugine, dai un’occhiata ai forum XDA; scorri verso il basso fino all’intestazione Download e fai clic sul primo link in quella sezione.
Dopo aver scaricato, eseguirlo per installare ADB., Una volta installato, è necessario passare alla cartella in cui è stato installato (C:\Program Files(x86)\Minimal ADB and Fastboot per impostazione predefinita) e fare doppio clic su cmd-here.exe. Si aprirà una finestra del prompt dei comandi in quella cartella.
Utilizzando una delle tecniche, nella finestra della shell, digitare adb start-server per avviare il server ADB.
Nota: il server ADB dovrà essere in esecuzione ogni volta che si desidera eseguire il debug. Se si riavvia il computer, il server non verrà eseguito automaticamente. Non è consigliabile eseguire ADB come servizio in background permanente.,
L’ultima cosa che dobbiamo fare per impostare il computer è abilitare il debug remoto negli strumenti di sviluppo di Chrome. Per fare ciò, apri Chrome sul tuo computer e vai alle impostazioni DevTools su chrome://inspect/#devices
Per eseguire il debug dei siti Web in Android da qui, assicurati che” Scopri dispositivi USB ” sia selezionato. Suggerirei anche di mantenere aperta questa sezione degli strumenti per sviluppatori in una scheda perché ne avremo bisogno presto.
Effettuare la connessione
Questo è il massimo che puoi ottenere con entrambi i dispositivi da solo., Per eseguire il debug di siti web in Android sul dispositivo, avremo bisogno di collegarli insieme. Se non l’hai già fatto, collega il telefono al computer tramite USB. Se non l’hai fatto come parte dell’installazione del driver, potresti vedere una notifica sulla barra delle applicazioni che ti informa che il tuo computer sta configurando il tuo nuovo dispositivo. Assicurarsi che il telefono è acceso e sbloccato. Se lo è e il server ADB è in esecuzione, dovresti vedere un popup intitolato ” Consenti debug USB?”.
Se non viene visualizzato, guarda nella tua area di notifica sul tuo dispositivo Android., Se dice “Connesso come dispositivo multimediale”, qualcosa del genere o qualcosa su “MTP”, fai clic su di esso. Questo dovrebbe portarti a una schermata che ti consente di scegliere un tipo di connessione diverso. Per il nostro scopo “Camera (PTP)” è il tipo di connessione appropriato. Una volta selezionato PTP, il ” Consenti debug USB?”popup dovrebbe venire.
Per evitare di dover gestire questo popup ogni volta che si collega il dispositivo, selezionare l’opzione “Consenti sempre da questo computer”. In entrambi i casi, ti consigliamo di fare clic su “OK”, che permetterà il vostro dispositivo mobile sia visibile al computer per il debug., A questo punto, torna alla scheda DevTools che abbiamo esaminato in precedenza. Se tutto è andato bene, si dovrebbe vedere il telefono e tutte le sue schede Chrome elencati lì ora.
Eseguire il debug siti web in esecuzione in Chrome sul dispositivo
Ora è il momento di smettere di ottenere istituito e iniziare il debug! Finalmente! Chrome sul computer dovrebbe mostrare un elenco di schede aperte nel browser Chrome sul dispositivo remoto. Se la scheda che si desidera eseguire il debug non è la scheda attiva, è possibile fare clic su” scheda messa a fuoco ” per renderlo la scheda attiva sul dispositivo. Quindi fare clic sul collegamento “ispeziona”.,
Questo farà apparire l’ispettore per quella scheda. Da qui, è possibile utilizzare gli strumenti di sviluppo di Chrome più o meno come si farebbe se si stesse eseguendo il debug di una pagina web nel browser desktop. Sei anche in grado di vedere lo schermo del dispositivo all’interno degli strumenti di sviluppo. Se non viene già visualizzato o se desideri disattivarlo, fai clic sull’icona accanto all’icona di ispezione nell’angolo in alto a sinistra degli strumenti di sviluppo.
Suggerimenti per il debug
Puoi anche controllare il tuo dispositivo dai tuoi strumenti di sviluppo., Usa il cursore del mouse sullo schermo come se il cursore fosse un dito sul dispositivo stesso.
- fare Clic per toccare
- fare Clic e trascinare per scorrere
- Utilizzare la rotella di scorrimento per scorrere
- tenere Premuto
Shiftmentre si trascina verso l’alto per ingrandire - tenere Premuto
Shiftmentre si trascina in basso per ingrandire
Si può notare che ci sono alcuni trasparente punti in schermo cast. Si tratta di elementi dell’interfaccia utente dall’app Chrome o dall’interfaccia utente del sistema del dispositivo., Sono nascosti perché il protocollo di debug remoto consente solo di interagire con la pagina web stessa.
Su dispositivi più vecchi e meno potenti lo screen cast utilizza molta potenza di elaborazione del tuo dispositivo mobile. Potresti notare che le prestazioni sembrano lente mentre stai facendo il casting dello schermo. Pertanto, se stai cercando di misurare le prestazioni, disabilita il cast dello schermo e interagisci direttamente con il dispositivo mobile.Infine, se si verificano problemi in cui non accade nulla quando si interagisce con il dispositivo, provare a chiudere l’app Chrome e riaprirla., Dovrai ricollegarti al dispositivo remoto tramite la schermata DevTools negli strumenti di sviluppo. Se ciò non aiuta, passare attraverso questa lista di controllo rapida:
- Scollegare il dispositivo e ricollegarlo a
- Bloccare il telefono e riattivarlo
- Chiudere la finestra strumenti di sviluppo e riaprirlo di nuovo.
Conclusione
Il debug di siti Web mobili in Android Chrome non deve essere difficile. Potrebbe essere necessario un po ‘ più di configurazione di quanto la maggior parte di noi vorrebbe. Ma, una volta che è curato, il debug di una pagina Web mobile sul dispositivo diventa molto più semplice., È ora possibile eseguire il debug di siti web mobili Android su un dispositivo fisico reale.
Hai passato troppo tempo a scoprire il tuo bug in primo luogo? Raygun consente di rilevare, diagnosticare e distruggere gli errori nel codice JavaScript o Android. Avvisi intelligenti e raggruppamento degli errori significa non perdere mai più un bug nella tua app. Per saperne di più Android crash reporting e JavaScript crash reporting.
Ulteriori informazioni sul debug di Android
Come progettare i tuoi errori per una migliore segnalazione degli errori
Inizia con il debug remoto in Android