Come eseguire il debug di app Web in remoto su Android

Il web oggi viene navigato più sui telefoni cellulari che sui desktop. Dal momento che i dispositivi sono diventati davvero portatili e le dimensioni dello schermo sono più piccole. Quindi, se stai sviluppando un'applicazione web, non puoi evitare il supporto per i telefoni cellulari (Android o iOS). I siti rotti o dall'aspetto scadente sugli schermi mobili possono davvero causare danni alla tua reputazione online. L'esperienza dell'utente sui telefoni è completamente diversa da quella del desktop. Quindi gli sviluppatori devono progettare appositamente le applicazioni per adattarsi allo schermo mobile.

Google Chrome Dev fornisce strumenti che ti consentono di ispezionare, eseguire il debug, analizzare l'esperienza sul dispositivo e puoi utilizzare gli strumenti di Chrome Dev sul tuo computer locale per eseguire il debug della tua applicazione sul dispositivo mobile. In questo tutorial impareremo come configurare la tua macchina di sviluppo locale per eseguire il debug in remoto su Android. Eseguiremo il debug tramite una connessione USB tra il tuo dispositivo mobile e il tuo computer di sviluppo locale.

Avrai bisogno di quanto segue, per andare avanti con il debug remoto:

1. Un cellulare o tablet Android con Chrome per Android 28 installato (puoi installarlo da qui).
2. Un cavo USB per connettere il tuo dispositivo Android al tuo computer di sviluppo locale, assicurati inoltre di avere le unità necessarie installate per connettere il tuo cellulare Android a un computer.
3. Controlla il Elenco dei driver USB OEM e scopri i driver adatti a te.
4. Chrome 28+ installato sul tuo computer di sviluppo locale.
5. Assicurati di avere l'estensione ADB Chrome installata sul tuo computer di sviluppo locale. Puoi installarlo da qui.

In questo tutorial utilizzeremo un Sony Xperia L (dispositivo Android) e Windows 7 sul nostro computer di sviluppo locale. Quindi iniziamo con il debug remoto:

1. Per prima cosa assicurati di avere la modalità Debug abilitata sul tuo dispositivo Android

Se non hai abilitato fai riferimento a questo:

• Per gli utenti su Android 4.2 fare riferimento a: http://www.thesmarthacks.com/2013/04/enabling-usb-debugging-mode-on-android.html.
• Il resto di essi può riferirsi a: http://www.groovypost.com/howto/mobile/how-to-enable-usb-debugging-android-phone/.

Per ulteriori informazioni sulla configurazione del dispositivo Android per lo sviluppo, fare riferimento a: http://developer.android.com/tools/device.html#setting-up.

2. Connessione del tuo dispositivo Android

Ora collega il tuo dispositivo Android al computer di sviluppo locale con un cavo USB. Una volta connesso il tuo dispositivo Android, devi abilitare il debug web USB sul tuo telefono, avviando Chrome sul tuo Android quindi, -> Impostazioni -> Strumenti per sviluppatori -> Seleziona Abilita debug web USB

Quando selezioni questa opzione se ti chiede di confermare la connessione con il computer di sviluppo, seleziona OK.

3. Debug

Dopo aver installato l'estensione ADB, vedrai un'icona Android grigia oltre al menu Chrome. Ora fai clic sull'icona di Android e seleziona -> Avvia ADB. Ora dovrebbe diventare verde e mostrerà il numero di dispositivi attualmente connessi. Quindi fare clic sull'icona e selezionare -> Visualizza obiettivi di ispezione. Questo dovrebbe aprire una nuova scheda e mostrerà il numero di dispositivi Android collegati e le schede attualmente aperte su di essi.

Ora seleziona la scheda dall'elenco di cui desideri eseguire il debug. Si aprirà una nuova finestra con gli Strumenti per sviluppatori.

Ora ispeziona alcuni elementi dalla pagina e l'elemento viene evidenziato in Chrome mobile, in tempo reale.

In questo modo puoi correggere i bug specifici del dispositivo, eseguendo il debug dagli strumenti di sviluppo. Puoi eseguire comandi dagli strumenti di sviluppo che verranno eseguiti nel dispositivo mobile Chrome. Visualizza anche diversi pannelli come Rete, Risorse, Timeline, Profili, Audit.

Ora puoi correggere bug specifici per dispositivi mobili ed eseguire il debug delle app mobili in tempo reale invece di distribuire la tua app sul server e quindi accedervi dal telefono ed eseguire il debug. Google Chrome Dev fornisce questi strumenti che risolvono un vero problema, per gli sviluppatori che creano app compatibili con i dispositivi.