Introduzione
Se sei uno sviluppatore web che ha come target il web multi-dispositivo, probabilmente dovrai testare i tuoi siti e le tue app web su una serie di dispositivi e configurazioni diverse. I test sincronizzati possono essere utili in questo caso e rappresentano un modo efficace per eseguire automaticamente la stessa interazione su una serie di dispositivi e browser contemporaneamente.
I test sincronizzati possono aiutare a risolvere due problemi particolarmente dispendiosi in termini di tempo:
- Mantenere tutti i dispositivi sincronizzati con l'URL che vuoi testare. Il caricamento manuale su ogni dispositivo è così ieri, richiede più tempo e rende più facile perdere regressioni.
- Sincronizzazione delle interazioni. La possibilità di caricare una pagina è ideale per i test visivi, ma per i test di interazione idealmente dovresti essere in grado di sincronizzare anche scorrimenti, clic e altri comportamenti.
Fortunatamente, se hai accesso ad alcuni dei tuoi dispositivi di destinazione, esistono vari strumenti che mirano a migliorare il flusso dal computer ai dispositivi mobili. In questo articolo esamineremo Ghostlab, Anteprima remota, Adobe Edge ispezione e Grunt.
Strumenti
GhostLab (Mac)
Ghostlab è un'applicazione Mac commerciale ($49) progettata per sincronizzare i test di siti e app web su più dispositivi. Con una configurazione minima, consente di sincronizzare contemporaneamente:
- Clic
- Navigazione
- Scorrimenti
- Input dei moduli (ad es.moduli di accesso, registrazione)
In questo modo, testare l'esperienza utente end-to-end del tuo sito su più dispositivi è molto semplice. Una volta aperta la pagina in un browser sui tuoi dispositivi, le modifiche apportate alla navigazione (compresi gli aggiornamenti) comportano l'aggiornamento immediato di tutti gli altri dispositivi connessi. Ghostlab supporta la visualizzazione delle directory locali, pertanto questo aggiornamento si verifica anche quando salvi le modifiche ai file locali, mantenendo tutto sempre sincronizzato.
Ho trovato che configurare Ghostlab è un processo indolore. Per iniziare, scarica, installa ed esegui la prova (o la versione completa se sei in vena di acquisti). Dovrai poi collegare il tuo Mac e i dispositivi che vuoi testare alla stessa rete Wi-Fi in modo che siano rilevabili.
Una volta eseguito Ghostlab, puoi fare clic su "+" per aggiungere un URL per il test o trascinarlo semplicemente dalla barra degli indirizzi del browser. In alternativa, trascina la cartella locale di cui vuoi eseguire il test nella finestra principale per creare una nuova voce del sito. Per questo articolo, sto testando una versione live del sito http://html5rocks.com. Difficile, eh? ;
Per avviare un nuovo server Ghostlab, fai clic sul pulsante di riproduzione ">" accanto al nome del tuo sito. Viene avviato un nuovo server, disponibile a un indirizzo IP specifico della tua rete (ad esempio http://192.168.21.43:8080).
Ho collegato un Nexus 4 e ho indirizzato Chrome per Android all'indirizzo IP che mi ha dato Ghostlab. È tutto ciò che devo fare. Ghostlab non richiede l'installazione di un client dedicato per ogni dispositivo come altre soluzioni e permette di iniziare i test ancora più rapidamente.
Qualsiasi dispositivo collegato all'URL di Ghostlab verrà aggiunto all'elenco dei client connessi nella barra laterale a destra della finestra principale di Ghostlab. Quando fai doppio clic sul nome del dispositivo vengono visualizzati ulteriori dettagli come le dimensioni dello schermo, il sistema operativo e così via. Ora dovresti essere in grado di testare la navigazione e la sincronizzazione dei clic. Evviva.
Ghostlab è anche in grado di visualizzare alcune statistiche sui dispositivi connessi, come la stringa UA, la larghezza e l'altezza dell'area visibile, la densità dei pixel del dispositivo, le proporzioni e altro ancora. Puoi modificare manualmente l'URL di base che stai esaminando in qualsiasi momento facendo clic sull'icona a forma di ingranaggio delle impostazioni accanto a una voce. Si aprirà una finestra di configurazione simile alla seguente:
Ora posso selezionare uno degli altri dispositivi connessi, fare clic su link diversi in HTML5Rocks e la navigazione è sincronizzata sia sul mio Chrome desktop (dove ho inserito lo stesso URL di Ghostlab) che su tutti i miei dispositivi.
L'aspetto ancora migliore è che Ghostlab dispone di un'opzione che consente di eseguire il proxy di tutti i link che passano attraverso la rete, in modo che, invece di un clic su http://192.168.21.43:8080/www.html5rocks.com, passando a www.html5rocks.com/en/performance, ad esempiohttp://192.168.21.43/www.htm5rocks.com/en/performance
Per abilitare questa opzione, seleziona "Carica tutti i contenuti tramite Ghostlab" nella scheda "Caricamento di contenuti".
Visualizzazione in azione:
Ghostlab è in grado di caricare qualsiasi numero di siti o finestre su qualsiasi browser supportato. Questo non ti permette solo di testare il tuo sito a diverse risoluzioni, ma anche di come si comporta il tuo codice su diversi browser e piattaforme. Benissimo!
Ghostlab ti consente di configurare la configurazione per l'area di lavoro del progetto che stai visualizzando in anteprima e puoi specificare se vuoi che le modifiche alla directory vengano controllate e aggiornate quando rilevate. Ciò significa che le modifiche causano l'aggiornamento di tutti i client connessi. Nessun altro aggiornamento manuale.
Forse ti stai chiedendo in quali altri modi Ghostlab può esserti d'aiuto. Sebbene non sia di certo un coltellino svizzero, supporta anche l'ispezione remota del codice sui dispositivi connessi. Tramite l'interfaccia principale, facendo doppio clic sul nome di un dispositivo qualsiasi dovrebbe visualizzare un'opzione di "debug" che avvia una versione di Chrome DevTools con cui sperimentare.
Ghostlab rende tutto ciò possibile tramite il web inspector remoto Weinre in bundle, che consente di eseguire il debug degli script e di modificare gli stili sui dispositivi connessi. Analogamente all'esperienza di debug remoto disponibile per Chrome per Android, puoi selezionare elementi, eseguire alcune profilazioni del rendimento ed eseguire script di debug.
Nel complesso, sono rimasta impressionata dalla velocità con cui ho potuto utilizzare Ghostlab per eseguire test giornalieri su più dispositivi. Se sei un freelancer, potresti trovare il costo della licenza commerciale un po' alto (vedi di seguito per ulteriori opzioni). Tuttavia, sarò felice di consigliare Ghostlab.
Adobe Edge Inspector CC (Mac, Windows)
Adobe Edge ispezione fa parte del pacchetto di abbonamento Adobe Creative Cloud, ma è disponibile anche come prova senza costi. Consente di gestire più dispositivi iOS e Android con Chrome (tramite l'estensione di Chrome Edge Inspector), in modo che, quando cerchi un determinato URL, tutti i dispositivi connessi restino sincronizzati.
Per iniziare, registrati per creare un account Adobe Creative Cloud o accedi a un account esistente, se ne hai già uno. Successivamente, scarica e installa Edge Inspector da Adobe.com (attualmente disponibile per Mac e Windows, ma non per Linux). Tieni presente che i docs per Edge ispezione sono utili da tenere a portata di mano.
Dopo averla installata, dovrai scaricare l'estensione Edge inspect di Chrome per sincronizzare la navigazione tra i dispositivi connessi.
Dovrai anche installare un client Edge Inspector su ogni dispositivo con cui vuoi sincronizzare le azioni. Fortunatamente i clienti sono disponibili per iOS, Android e Kindle.
Con il processo di installazione alle spalle, possiamo iniziare a esaminare le nostre pagine. Per far sì che questa operazione funzioni, devi assicurarti che tutti i dispositivi siano connessi alla stessa rete.
Avvia Edge ispezione sul desktop, l'estensione Edge ispezione in Chrome e poi l'app sui tuoi dispositivi (vedi di seguito):
Ora possiamo visitare un sito come HTML5Rocks.com su computer e il nostro dispositivo mobile si aprirà automaticamente sulla stessa pagina.
Nell'estensione vedrai anche il tuo dispositivo elencato con un simbolo <> accanto, come nello screenshot di seguito. Se fai clic su questa azione viene avviata un'istanza di Weinre che consente di ispezionare la pagina ed eseguirne il debug.
Weinre è un visualizzatore DOM e una console e non dispone di funzionalità di Chrome DevTools come il debug JavaScript, la profilazione e la struttura a cascata della rete. Sebbene sia il minimo indispensabile per gli strumenti degli sviluppatori, è utile per controllare lo stato di DOM e JavaScript.
L'estensione Edge ispezione supporta anche la generazione di screenshot dai dispositivi connessi. Utile per testare il layout o semplicemente per acquisire screenshot della tua pagina da condividere con gli altri.
Per gli sviluppatori che già pagano per CC, Edge Inspector è un'ottima soluzione. Tuttavia, presenta alcune avvertenze, ad esempio ogni dispositivo richiede l'installazione di un client dedicato e un piccolo intervento di configurazione aggiuntivo che potresti non trovare con un'alternativa come Ghostlab.
Anteprima remota (Mac, Windows, Linux)
Anteprima remota è uno strumento open source in cui ospitare pagine e contenuti HTML che puoi visualizzare su più dispositivi.
L'anteprima remota esegue una chiamata XHR a intervalli di 1100 ms per verificare se un URL in un file di configurazione è stato modificato. Se rileva che lo è, lo script aggiorna l'attributo src di un iframe caricato nella pagina per ogni dispositivo, caricando la pagina al suo interno. Se non vengono rilevate modifiche, lo script continuerà il polling fino a quando non viene apportata una modifica.
Questo è ottimo per concatenare i dispositivi e modificare facilmente un URL tra tutti. Per iniziare:
- Scarica anteprima remota e sposta tutti i relativi file in un server accessibile in locale. Può trattarsi di Dropbox, un server di sviluppo o altro.
- Carica "index.html" da questo download su tutti i tuoi dispositivi target. Questa pagina verrà utilizzata come driver e caricherà la pagina da testare utilizzando un iframe.
- Modifica il file "url.txt" (incluso nel download e ora pubblicato sul tuo server) con l'URL di cui vuoi visualizzare l'anteprima. Salva questo file.
- Anteprima remota noterà che il file url.txt è cambiato e aggiornerà tutti i dispositivi connessi per caricare il tuo URL.
Sebbene sia una soluzione lo-fi, Anteprima remota è senza costi e funziona.
Grunt + ricaricamento dal vivo (Mac, Windows, Linux)
Grunt (e Yeoman) sono strumenti a riga di comando utilizzati per strutturare ed eseguire progetti nel front-end. Se utilizzi già questi strumenti e hai configurato il ricaricamento in tempo reale, è facile aggiornare il tuo flusso di lavoro per abilitare i test cross-device. Ogni modifica apportata nell'editor causa un ricaricamento in tutti i dispositivi su cui hai aperto l'app locale.
Probabilmente sei abituato a usare grunt server. Quando viene eseguito dalla directory root del progetto, controlla le eventuali modifiche apportate ai file di origine e aggiorna automaticamente la finestra del browser. Ciò è dovuto all'attività
grunt-contrib-watch che eseguiamo come parte del server.
Se hai utilizzato Yeoman per strutturare il tuo progetto, verrà creato un gruntfile con tutto ciò che serve per ricaricare il live streaming sul tuo desktop. Per fare in modo che funzioni cross-device, devi solo cambiare una
proprietà, ovvero hostname (sul computer). Dovrebbe essere elencato sotto
connect. Se noti che hostname è impostato su localhost, modificalo in
0.0.0.0. Prossima esecuzione grunt server e, come di consueto, dovrebbe aprirsi una nuova finestra con un'anteprima della pagina. L'URL sarà probabilmente simile a http://localhost:9000 (9000 è la porta).
Avvia una nuova scheda o terminale e usa ipconfig | grep inet per scoprire l'IP interno del tuo sistema. Potrebbe essere simile a 192.168.32.20. L'ultimo passaggio è aprire un browser come Chrome sul dispositivo su cui vuoi sincronizzare i livereload e digitare questo indirizzo IP seguito dal numero di porta indicato in precedenza, ad esempio 192.169.32.20:9000.
È tutto. Il ricaricamento in tempo reale ora dovrebbe comportare eventuali modifiche apportate ai file di origine sul desktop per attivare i ricaricamenti sia nel browser desktop sia nel browser sul dispositivo mobile. Ottimo!
Yeoman dispone inoltre di un generatore di dispositivi mobili che semplifica la configurazione di questo flusso di lavoro.
Emmet LiveStyle
Emmet LiveStyle è un plug-in per browser ed editor che aggiunge modifiche CSS in tempo reale al flusso di lavoro di sviluppo. È attualmente disponibile per Chrome, Safari e Sublime Text e supporta la modifica bidirezionale (da editor a browser e viceversa).
Emmet LiveStyle non forza un aggiornamento completo del browser quando apporti modifiche, ma invia le modifiche CSS al protocollo di debug remoto DevTools. Ciò significa che puoi visualizzare le modifiche apportate nel tuo editor desktop in qualsiasi versione collegata di Chrome, sia su Chrome desktop sia su Chrome per Android.
LiveStyle include la "modalità multi-view", ideale per testare e modificare design reattivi su finestre e dispositivi. In modalità multi-visualizzazione, tutti gli aggiornamenti dell'editor vengono applicati a tutte le finestre così come gli aggiornamenti DevTools per la stessa pagina.
Una volta installato il pacchetto LiveStyle, per iniziare a modificare in tempo reale il CSS:
- Avvia Sublime Text e apri un file CSS in un progetto
- Avvia Chrome e vai alla pagina con il CSS che vuoi modificare
- Apri DevTools e vai al riquadro LiveStyle. Seleziona l'opzione "Abilita LiveStyle". Nota: DevTools dovrà essere tenuto aperto durante la sessione di modifica in tempo reale per ogni finestra affinché gli aggiornamenti dello stile vengano applicati.
- Una volta attivato, a sinistra verrà visualizzato un elenco di fogli di stile e un elenco dei file dell'editor a destra. Seleziona il file dell'editor da associare al browser. È tutto. Giraffa.
Ora l'elenco dei file dell'editor verrà aggiornato automaticamente quando modifichi, crei, apri o chiudi i file.
Conclusioni
I test cross-device sono ancora un settore nuovo e in rapida evoluzione, con molti nuovi concorrenti in fase di sviluppo. Fortunatamente esistono diversi strumenti senza costi e commerciali per garantire la compatibilità e i test su un ampio numero di set di dispositivi.
Detto ciò, ci sono ancora buone potenzialità di miglioramento in quest'area e ti invitiamo a pensare a come possiamo migliorare ulteriormente gli strumenti per i test su più dispositivi. Tutto ciò che riduca i tempi di configurazione e migliori il flusso di lavoro cross-device va bene.
Problemi
Forse il problema maggiore che ho riscontrato durante i test con questi strumenti è stato che i dispositivi si spegnevano regolarmente. Non è un'interruzione delle offerte, ma diventa fastidioso dopo un po'. Se possibile, ti consigliamo, tuttavia, di disattivare la modalità di sospensione dei dispositivi in modo che non sia sempre attiva; tuttavia, tieni presente che questa operazione può scaricare la batteria se non sei sempre collegato alla corrente.
Personalmente non ho riscontrato grossi problemi con GhostLab. A 49 $, il prezzo potrebbe essere leggermente alto; tuttavia, tieni presente che se lo usi regolarmente, si paga più o meno da solo. Una delle cose più belle della configurazione era non doversi preoccupare dell'installazione e della gestione di un client per dispositivo di destinazione. Lo stesso URL ha funzionato ovunque.
Grazie ad Adobe Edge Inspector, è stato un po' noioso dover installare e utilizzare client specifici su ogni dispositivo. Ho anche scoperto che non aggiorna costantemente tutti i client collegati, il che significa che devo farlo autonomamente dall'estensione Chrome. Richiede inoltre un abbonamento a Creative Cloud ed è limitato al caricamento di siti nel client anziché in un browser selezionato sui tuoi dispositivi. Ciò potrebbe limitare la tua capacità di eseguire test accurati.
L'anteprima remota ha funzionato come pubblicizzato, ma è estremamente leggera. Ciò significa che per qualsiasi cosa che va oltre l'aggiornamento del sito su più dispositivi, avrai bisogno di un'opzione di strumenti più avanzata. Ad esempio, non sincronizza i clic o gli scorrimenti.
Suggerimenti
Se stai cercando una soluzione multipiattaforma senza costi per iniziare, ti consiglio di usare Anteprima remota. Per coloro che lavorano in un'azienda alla ricerca di una soluzione a pagamento, GhostLab è stato costantemente eccellente secondo la mia esperienza, ma è disponibile solo per Mac. Per gli utenti Windows, Adobe Edge Esamina è la scelta migliore e, meno alcune particolarità, in genere svolge il lavoro.
Grunt e LiveStyle sono ottimi anche per migliorare l'iterazione dal vivo durante lo sviluppo.