Sviluppare per il mobile dovrebbe essere facile quanto per il desktop. Abbiamo lavorato duramente in Chrome DevTools per semplificare le cose e ora è arrivato il momento di svelare alcune nuove funzionalità che dovrebbero migliorare notevolmente lo sviluppo web mobile. Innanzitutto, il debug remoto, poi presenteremo l'emulazione mobile corretta.
Trasmettere lo schermo del dispositivo al computer
Fino ad ora, durante il debug remoto, dovevi spostare lo sguardo dal dispositivo agli strumenti per gli sviluppatori. Ora Screencast mostra lo schermo dei tuoi dispositivi proprio accanto a devtools. Vedere è bello, ma interagire è ancora meglio:
- I clic sullo screencast vengono tradotti in tocchi e sul dispositivo vengono attivati gli eventi di tocco appropriati.
- Controlla elemento sul dispositivo con il cursore del computer
- Digita sulla tastiera del computer: tutte le battute vengono inviate al dispositivo. Risparmia molto tempo rispetto alla digitazione con i pollici.
- Scorri la pagina spostando il cursore o semplicemente scorrendo sul trackpad del laptop.
La documentazione completa sullo screencasting illustra tutto questo e altro ancora, ad esempio l'invio di un gesto di zoom con pizzico. È necessario Chrome su Android beta (m32).
Debug remoto facile
18 mesi fa, Chrome ha introdotto il debug remoto corretto per i browser WebKit, ma se lo hai provato all'epoca, dovevi gestire un download di 400 MB dell'SDK Android, aggiungere il file binario adb a $PATH e alcuni incantesimi magici della riga di comando.
Ora siamo lieti di annunciare che puoi dimenticare tutto questo. Ora Chrome può rilevare e comunicare in modo nativo con i dispositivi connessi tramite USB. Abbiamo implementato il protocollo adb direttamente tramite USB in Chrome, quindi puoi facilmente andare su Menu > Tools > Inspect Devices e avviare immediatamente la sessione di debug remoto.
Questo metodo funziona perfettamente su tutte le piattaforme, incluso Chrome OS, ma tieni presente che su Windows dovrai prima installare i driver USB appropriati per comunicare con il dispositivo. Se non l'hai mai provato prima, dovrai anche attivare il debug USB sul dispositivo e confermare di utilizzare la versione beta di Chrome per Android. Leggi la documentazione completa.
Inoltro di porte per i progetti locali
Stai sviluppando su localhost:8000, ma lo smartphone non riesce a raggiungere questa pagina. Di conseguenza, abbiamo aggiunto il port forwarding direttamente nel flusso di lavoro di debug remoto. Ora è facile lavorare ai progetti completi, senza alcun hack di tunneling. In about:inspect fai clic su Inoltro di porta per impostare le porte che vuoi che siano disponibili. Se sono disponibili, si accenderanno in verde.
Emulazione mobile
Non hai sempre i dispositivi necessari per verificare la compatibilità, giusto? Sebbene il debug remoto dei dispositivi reali ti offra la migliore esperienza in termini di prestazioni e tocco, ora puoi emulare in modo realistico molte caratteristiche dei dispositivi su computer, risparmiando tempo e rendendo il ciclo di iterazione molto più veloce.
Emulare le dimensioni dello schermo, devicePixelRatio e <meta viewport> con la simulazione completa degli eventi tocco
Se hai utilizzato la precedente funzionalità Dati dei dispositivi, la nuova versione è un enorme upgrade. Il team ha lavorato duramente per fare in modo che la nuova emulazione mobile offra una rappresentazione quasi reale di ciò che vedresti su dispositivi reali. Ad esempio, i browser WebKit gestiscono un complesso algoritmo di ridimensionamento automatico del testo e, in effetti, ogni dispositivo ha un "fattore di correzione" specifico per il ridimensionamento automatico del testo che cambia per mantenere il testo leggibile. In modalità di emulazione puoi verificare che questo comportamento venga applicato e vedere i risultati.
Rapporto pixel del dispositivo
Fino ad ora, è stato quasi impossibile vedere cosa viene visualizzato da un dispositivo ad alta risoluzione su un dispositivo a bassa risoluzione. Ora l'emulazione di dPR in DevTools adatterà la visualizzazione per consentirti di aumentare lo zoom in uno scenario DPI elevato. Inoltre, puoi aspettarti che window.devicePixelRatio, @media (-webkit-min-device-pixel-ratio: 2), image-set( url(pic2x.jpg) 2x, …) e così via riflettano la tua impostazione, consentendoti di visualizzare l'adattamento dell'app, incluso il caricamento di risorse specifiche per dpi diversi.
L'emulazione del dispositivo non si estende alle funzionalità o ai bug del browser. Pertanto, durante l'emulazione di iOS, WebGL continuerà a funzionare e non riscontrerai il bug di zoom sull'orientamento di iOS 5. Per verificare questa variabilità, vai al dispositivo.
Emulazione corretta di <meta viewport> (e @viewport)
In precedenza, il test del comportamento di width=device-width e minimum-scale:1.0 era un gioco solo per dispositivi. Ora puoi provare rapidamente diverse visualizzazioni e osservare come vengono visualizzate.
Simulazione di eventi touch
L'impostazione Emulare tocco garantisce che i clic vengano interpretati come touchstart e così via. Inoltre, funzioneranno gli eventi sintetici come zoom, scorrimento e panoramica. Per aumentare lo zoom pizzicando, basta shift+trascinare o shift+scorrere per aumentare lo zoom dei contenuti. Avrai una visualizzazione ottimale della scalabilità dei contenuti oltre l'area visibile.
Infine, le tecniche di spoofing dell'agente utente (sia a livello di intestazione della richiesta che di window.navigator), di geolocalizzazione ed emulazione dell'orientamento ti consentono di esplorare la piena funzionalità del tuo dispositivo.
Preimpostazioni del dispositivo
Le preimpostazioni di emulazione ti consentono di selezionare uno smartphone o un tablet e di ottenere le dimensioni dello schermo, la dPR e l'UA corretti per il dispositivo, nonché gli eventi touch completi e il viewport emulati. Puoi provare preset specifici o modificare facilmente queste caratteristiche una alla volta.
Visita la pagina devtools.chrome.com per consultare la documentazione completa sull'emulazione dei dispositivi mobili con DevTools.
Demo
Per una demo completa di tutte queste funzionalità in azione, guarda il mio talk di 23 minuti del Chrome Dev Summit su DevTools per il mobile: