Lo sviluppo per i dispositivi mobili dovrebbe essere semplice quanto lo sviluppo per i computer desktop. Stiamo lavorando duramente in Chrome DevTools per semplificare le cose ed è il momento di presentare alcune nuove funzionalità che dovrebbero migliorare notevolmente lo sviluppo del tuo web mobile. Iniziamo con il debug remoto, quindi illustreremo la corretta emulazione dei dispositivi mobili.
Trasmetti lo schermo del dispositivo al computer
Finora, durante il debug remoto, avevi dovuto spostare gli occhi avanti e indietro tra il dispositivo e gli strumenti di sviluppo. Ora Registra schermo mostra lo schermo dei tuoi dispositivi direttamente accanto a DevTools. Vederli è bellissimo, ma interagire con essi è ancora meglio:
- I clic sullo screencast vengono tradotti in tocchi e sul dispositivo vengono attivati gli eventi di tocco appropriati.
- Ispeziona elementi sul dispositivo con il puntatore sul desktop
- Digita sulla tastiera del computer: tutte le sequenze di tasti vengono inviate al dispositivo. Fa risparmiare molto tempo a digitare con i pollici.
- Scorri la pagina scorrendo la pagina con il puntatore del mouse o semplicemente scorrendo sul trackpad del tuo laptop.
La documentazione completa sullo screencast illustra tutto questo e altro ancora, come l'invio di un gesto di pizzicatura dello zoom. È necessario Chrome su Android Beta (m32).
Facile debug remoto
18 mesi fa, Chrome ha introdotto il debug remoto corretto per i browser WebKit. Tuttavia, se lo provavi allora, dovevi affrontare un download di 400 MB di SDK per Android, aggiungendo il programma binario adb al file $PATH e alcuni incantimenti della riga di comando magici.
Ora siamo lieti di annunciare che potrete dimenticare tutto questo. Chrome può ora rilevare e comunicare in modo nativo con i tuoi dispositivi connessi tramite USB. Abbiamo implementato il protocollo adb direttamente tramite USB in Chrome, così puoi accedere facilmente a Menu > Tools > Inspect Devices e avviare immediatamente la sessione di debug remoto.
Questo metodo funziona benissimo su tutte le piattaforme, incluso Chrome OS, tuttavia tieni presente che su Windows, dovrai prima installare i driver USB adeguati per comunicare con il dispositivo. Se non l'hai mai provato prima, dovrai anche attivare il debug USB sul dispositivo e verificare di utilizzare Chrome per Android Beta. Leggi la documentazione completa.
Port-forward per progetti locali
Stai sviluppando il servizio su localhost:8000, ma il tuo telefono non riesce a raggiungerlo. Abbiamo quindi aggiunto il port forwarding direttamente nel flusso di lavoro di debug remoto. Ora è più facile lavorare su progetti completi, senza ricorrere a trucchetti per il tunneling. Su about:inspect, fai clic su Port forwarding per impostare le porte che vuoi rendere disponibili. Se sono pronte, la spia si illumina verde.
Emulazione dispositivi mobili
Non hai sempre a disposizione i dispositivi di cui hai bisogno per verificare la compatibilità, vero? Anche se il debug remoto dei dispositivi reali ti offre la migliore percezione del tocco e delle prestazioni, ora puoi emulare in modo realistico molte caratteristiche dei dispositivi sul computer, risparmiando tempo e rendendo il loop di iterazione molto più veloce.
Emula le dimensioni dello schermo, il rapporto pixel del dispositivo e <meta viewport> con la simulazione di eventi touch completi
Se hai già avuto modo di vedere la precedente funzionalità delle metriche relative ai dispositivi, quella che è ora disponibile rappresenta un enorme upgrade. Il team si è impegnato duramente per rendere la nuova emulazione mobile una rappresentazione quasi reale di ciò che vedresti su dispositivi reali. Ad esempio, i browser WebKit mantengono un complesso algoritmo di ridimensionamento automatico del testo e, infatti, ogni dispositivo ha un "fattore sfumatura" specifico per il testo che viene modificato automaticamente, in modo da garantire la leggibilità del testo. In modalità di emulazione puoi confermare l'applicazione di questo comportamento e visualizzare i risultati.
Proporzioni pixel del dispositivo
Finora, è stato quasi impossibile vedere cosa mostra un dispositivo hi-DPI su un dispositivo con un basso DPI. Ora, l'emulazione dPR in DevTools adatta la visualizzazione per consentirti di aumentare lo zoom su uno scenario DPI più approfondito. 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 vedere come si adatta la tua app, incluso il caricamento di asset specifici per DPI diversi.
L'emulazione dei dispositivi non si estende completamente alle funzionalità o ai bug del browser. Pertanto, anche durante l'emulazione di iOS, WebGL continuerà a funzionare e non riscontrerai il bug dello zoom per l'orientamento di iOS 5. Per sperimentare questa variabilità, vai al dispositivo.
Emulazione corretta di <meta viewport> (e @viewport)
Stiamo testando il comportamento di width=device-width e minimum-scale:1.0 in passato è un gioco dedicato esclusivamente ai dispositivi. Ora puoi provare rapidamente diverse aree visibili e osservarne il rendering.
Simulazione di eventi touch
L'impostazione emula touchscreen assicura che i clic vengano interpretati come touchstart e così via. Inoltre, gli eventi sintetici come lo zoom, lo scorrimento e la panoramica funzioneranno. Per eseguire lo zoom con un pizzico, shift+trascina o shift+scorri per aumentare lo zoom dei contenuti. Otterrai un'ottima visuale dei contenuti che verranno ridimensionati oltre l'area visibile.
Infine, le funzionalità di standby dello spoofing dello user agent (sia a livello di intestazione della richiesta che di window.navigator), di geolocalizzazione e di emulazione dell'orientamento ti consentono di esplorare le funzionalità complete del tuo dispositivo.
Preimpostazioni dispositivo
Le preimpostazioni di emulazione ti consentono di selezionare uno smartphone o un tablet e ottenere le dimensioni dello schermo corrette, dPR e UA applicate al dispositivo, oltre a eventi full touch e area visibile emulati. Puoi provare determinate preimpostazioni o modificare facilmente le caratteristiche una per una.
Passa a devtools.chrome.com per la documentazione completa sull'emulazione mobile con DevTools
Demo
Per avere una demo completa di tutte queste funzionalità in azione, dai un'occhiata alla mia conferenza di 23 minuti al Chrome Dev Summit su DevTools per dispositivi mobili: