Debug di applicazioni Cordova/Phonegap con Chrome

Come è possibile monitorare il comportmento delle applicazioni web sul proprio dispositivo, è possibile effettuare il debug in tempo reale anche delle applicazioni mobili basate su Apache Cordova (HTML5, CSS, Javascript).
Con l'articolo in questione spiegherò come questo possa essere fattibile con Google Chrome e sistemi Android.
Nel caso si fosse interessati al debug di applicazioni ibride per piattaforme iOS potete fare riferimento all'articolo "DEBUG DI APPLICAZIONI CORDOVA/PHONEGAP PER IOS CON SAFARI".

I vantaggi dell'utilizzo di tale sistema sono l'abbattimento delle differenze a livello visivo percepite eseguendo la propria app direttamente sul browser desktop ma soprattutto il controllo a runtime del Javascript utilizzato.

I requisiti necessari per poter adottare questa funzionalità sono:
- Cordova 3.3.0 o superiore
- Android 4.4.0 o superiore
- Chrome 30+
- Cavo USB per collegare il device al computer
- Avere attivata l'opzione "Debug USB" sul proprio dispositivo

Per attivare l'opzione "Debug USB" è necessario navigare nelle impostazioni del proprio dispositivo per rendere visibile preventivamente un'impostazione nascosta di default chiamata "Opzioni Sviluppatore", Fig. 1:

Fig. 1 - Android - opzioni sviluppatore

Per rendere visibile tale impostazione si dovrà cliccare almeno 7 volte sulla voce "Build number" o "Versione build" (evito di riportare il percorso per raggiungere tale opzioni perchè può lievemente variare da dispositivo a dispositivo e non credo che uno sviluppatore possa trovare difficoltà nel trovarla, in tutti i casi è localizzata all'interno della sezione Info sul dispositivo presente nelle Impostazioni).

Non resta quindi che accedere a questa nuova sezione e al suo interno spuntare la voce "Debug USB" (in questo modo la modalità di Debug si avvia quando è collegato un dispositivo USB).

Da questo momento è possibile effettuare il debug delle nostre applicazioni ibride create con Cordova attraverso Chrome.
Sarà necessario accedere all'inspect di Chrome che si trova espandendo le Opzioni del browser, dopodichè dalla voce "Altri Strumenti" cliccare su "Strumenti per sviluppatori", dalla finestra che si aprirà espandere l'icona con i tre pallini in verticale (Customize and control DevTools) e cliccare su "Inspect devices...". Più semplicemente è possibile accedervi scrivendo "chrome://inspect/#devices" nella barra degli indirizzi.

Si aprirà una nuova tab del browser, Fig. 2, dove è essenziale che ci sia il segno di spunta all'unica casella di testo visibile in questo momento chiamata "Discover USB devices":

Fig. 2 - DevTools - Chrome inspect devices

Collegando il dispositivo al computer tramite il cavo USB è probabile che venga richiesto, se non già confermato precedentemente, di consentire il debug USB tramite il computer in uso. Inutile dire che è necessario farlo per poter procedere con l'utilizzo della funzionalità.
A meno che non ci siano situazioni particolari, come ad esempio restrizioni della rete, le impostazioni di Port forwarding possono essere lasciate come quelle di default (porta 8080 con indirizzo localhost:8080).
Una volta collegato il dispositvo la situazione dovrebbe essere simile alla seguente, Fig. 3:

Fig. 3 - DevTools - Chrome inspect - dispositivo connesso con USB

Nel caso non dovesse succedere niente, ovvero permane la scritta "No devices detected. Please read the remote debugging documentation to verify your device is enabled for USB debugging.", è necessario verificare che, come indicato dalle specifiche su developers.google.com:

- i driver USB del proprio dispositivo siano installati correttamente (su Windows);
- il dispositivo è connesso direttamente all'USB del computer senza passare da un hub;
- l'opzione "Debug USB" sia abilitata tramite la procedura precedentemente descritta;
- la spunta su "Discover USB devices" nella pagina di "chrome://inspect/#devices" sia presente;
- i requisiti elencati a inizio articolo siano soddisfatti.

Se il problema persiste è possibile provare a revocare le autorizzazioni USB di debugging dalle "Opzioni sviluppatore" sul proprio dispositivo cliccando sull'opzione "Revoca autorizzazioni debug USB". E ripetere i passaggi di configurazione.

In alternativa, basandomi sulla mia esperienza, ho riscontrato che è possibile "risvegliare" il collegamento tra il dispositivo ed il computer (collegati con USB) facendo partire la prima volta l'esecuzione dell'applicazione dalla linea di comando (CLI) con il comando: cordova run android

Lanciando quindi l'app dal proprio dispositivo (o dalla CLI) compariranno i relativi dettagli, Fig. 4:

Fig. 4 - DevTools - Chrome inspect - app in esecuzione

Cliccando su "inspect" si aprirà finalmente il debug così come siamo abituati ad utilizzarlo dal browser desktop per monitorare le applicazioni web, Fig. 5, con la possibilità di visualizzare e modificare il DOM, CSS e Javascript, verificare errori ed eventi in Console, controllare l'esito ed i parametri inviati per le chiamate esterne e così via:

Fig. 5 - DevTools - Chrome inspect - console per gli sviluppatori

Non c'è ombra di dubbio dell'oggettivo vantaggio di poter apportare modifiche in tempo reale senza dover obbligatoriamente, per ogni minima variazione, compilare l'app ed eseguirla sul dispositivo o sull'emulatore.