Lo sviluppo per i dispositivi mobili dovrebbe essere facile quanto lo sviluppo per i computer desktop. Abbiamo lavorato duramente in Chrome DevTools per semplificare le cose ed è il momento di svelare alcune nuove funzionalità che dovrebbero migliorare notevolmente lo sviluppo del tuo sito web mobile. Iniziamo con il debug remoto e poi sveleremo l'emulazione corretta dei dispositivi mobili.
Registra lo schermo del tuo dispositivo su 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 dispositivi accanto agli strumenti di sviluppo. Avere il quadro è bello, ma interagire con i contenuti è ancora meglio:
- I clic sullo screencast vengono tradotti in tocchi e sul dispositivo vengono attivati gli eventi di tocco appropriati.
- Ispezionare l'elemento sul dispositivo con il puntatore del desktop
- Digita sulla tastiera del computer. Tutte le sequenze di tasti vengono inviate al dispositivo. Un enorme risparmio di tempo rispetto alla digitazione con i pollici.
- Scorri la pagina con il puntatore o semplicemente scorrendo il dito sul trackpad del tuo laptop.
La documentazione completa sullo screencast illustra tutto questo e altro ancora, come l'invio di un gesto di zoom con le dita. È necessario Chrome su Android Beta (m32).
debug remoto semplice
18 mesi fa, Chrome ha introdotto il debug remoto corretto per i browser WebKit, ma se l'avevi provato all'epoca, dovevi dover scaricare l'SDK Android da 400 MB, aggiungendo il programma binario adb al tuo $PATH e alcuni magici incantesimi della riga di comando.
Ora siamo felici di annunciare che puoi dimenticare tutto questo. Chrome può ora rilevare e parlare in modo nativo sui 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 tua sessione di debug remoto.
Questa soluzione funziona benissimo su tutte le piattaforme, incluso ChromeOS, ma tieni presente che su Windows dovrai prima installare i driver USB appropriati per comunicare con il dispositivo. Se non hai mai provato prima Chrome, dovrai attivare anche il debug USB sul dispositivo e verificare di utilizzare Chrome per Android Beta. Leggi la documentazione completa.
Port-forward per i progetti locali
Stai sviluppando su localhost:8000, ma il tuo telefono non riesce a raggiungerlo. Pertanto, abbiamo aggiunto il port forwarding direttamente al flusso di lavoro di debug remoto. Ora è facile lavorare a progetti completi, senza trucchetti di tunneling. Il giorno about:inspect fai clic su Port forwarding per impostare le porte che vuoi rendere disponibili e, se sono pronte, si illuminano in verde.
Emulazione mobile
Non hai sempre i dispositivi di cui hai bisogno per testare la compatibilità, vero? Anche se il debug remoto di dispositivi reali ti darà la migliore sensazione per le prestazioni e il tocco, ora puoi emulare realisticamente molte caratteristiche dei dispositivi su computer, facendoti risparmiare tempo e rendendo il tuo ciclo di iterazione molto più veloce.
Emula dimensioni dello schermo, devicePixelRatio e <meta viewport> con la simulazione di eventi full touch
La precedente funzionalità Metriche dei dispositivi è disponibile ora su un grande upgrade. Il team si è impegnato molto per far sì che la nuova emulazione dei dispositivi mobili offra una rappresentazione quasi realistica di ciò che vedresti sui dispositivi reali. Ad esempio, i browser WebKit dispongono di un complesso algoritmo di adattamento automatico del testo e, infatti, ogni dispositivo ha un "fudge factor" specifico per il ridimensionamento automatico del testo che viene modificato per contribuire a mantenere la leggibilità del testo. In modalità di emulazione puoi confermare che questo comportamento viene applicato e visualizzare i risultati.
Proporzioni pixel dispositivo
Finora, è stato quasi impossibile vedere cosa viene visualizzato da un dispositivo hi-DPI su un dispositivo low-DPI. Ora l'emulazione dPR in DevTools adatterà la visualizzazione per consentirti di aumentare lo zoom in uno scenario DPI approfondito. Inoltre, i valori window.devicePixelRatio, @media (-webkit-min-device-pixel-ratio: 2), image-set( url(pic2x.jpg) 2x, …) e così via rifletteranno la tua impostazione, consentendoti di visualizzare in che modo l'app si adatta, incluso il caricamento di diversi asset specifici dei DPI.
L'emulazione dei dispositivi non si estende completamente alle funzionalità o ai bug del browser. Pertanto, durante l'emulazione di iOS, WebGL continua a funzionare e non è possibile rilevare il bug dello zoom di orientamento di iOS 5. Per sperimentare la variabilità, rivolgiti al dispositivo.
Emulazione corretta di <meta viewport> (e @viewport)
Il test del comportamento di width=device-width e minimum-scale:1.0 è stato precedentemente utilizzato come gioco solo per il dispositivo. Ora puoi provare rapidamente diverse aree visibili e osservarne il rendering.
Simulazione evento touch
Con l'impostazione dell'emulazione del touchscreen, i tuoi clic vengono interpretati come touchstart e così via. Inoltre, potrai usufruire di eventi sintetici come zoom, scorrimento e panoramica. Per pizzicare ed eseguire lo zoom, è sufficiente shift+trascinare o shift+scorrere per aumentare lo zoom dei contenuti. Avrai una visualizzazione ottimale del ridimensionamento dei contenuti oltre l'area visibile.
Infine, le funzionalità di spoofing degli user agent (sia a livello di intestazione della richiesta che a livello di window.navigator), di geolocalizzazione e di emulazione dell'orientamento ti consentono di esplorare tutte le funzionalità del dispositivo.
Preimpostazioni dispositivo
I preset di emulazione ti consentono di selezionare uno smartphone o tablet e di applicare le dimensioni dello schermo (dPR, UA) corrette al dispositivo, oltre all'emulazione dell'area visibile e degli eventi full touch. Puoi provare delle preimpostazioni particolari o modificare facilmente queste caratteristiche una per una.
Visita il sito devtools.chrome.com per la documentazione completa sull'emulazione mobile con DevTools
Demo
Per la demo completa di tutte queste funzionalità in azione, dai un'occhiata alla mia presentazione di 23 minuti del Chrome Dev Summit su DevTools per dispositivi mobili: