Google I/O 2016 è terminato. DevTools ha avuto una presenza significativa all'I/O, con un intervento di Paul Bakaus, Paul Irish e Seth Thompson che ha delineato il futuro di DevTools. Guarda il video di seguito o continua a leggere per scoprire di più sulle prossime novità di DevTools nel 2016 e oltre.
In creazione
Lo scopo di DevTools è semplificare ogni fase del ciclo di vita dello sviluppo web. Probabilmente sai che DevTools può aiutarti a eseguire il debug o il profiling di un sito web, ma potresti non sapere come utilizzarlo per creare un sito. Per "creazione" si intende l'atto di creare un sito. Uno degli obiettivi nel prossimo futuro è semplificare l'iterazione, la sperimentazione ed emulazione del tuo sito su più dispositivi.
Modalità dispositivo
Il team di DevTools continua a eseguire l'iterazione dell'esperienza della modalità Dispositivo, che ha ricevuto il primo upgrade importante in Chrome 49. Per una panoramica degli aggiornamenti, consulta il post di marzo (Una nuova modalità Dispositivo per un mondo mobile-first). L'obiettivo generale è fornire un flusso di lavoro continuo per la visualizzazione ed emulazione del tuo sito su tutti i fattori di forma.
Ecco un breve riepilogo di alcuni aggiornamenti della modalità Dispositivo implementati in Canary da quando abbiamo pubblicato l'articolo a marzo.
Quando visualizzi una pagina come dispositivo specifico, puoi immergerti di più nell'esperienza mostrando l'hardware del dispositivo intorno alla pagina.
Il menu di orientamento del dispositivo ti consente di visualizzare la pagina quando sono attivi diversi elementi dell'interfaccia utente di sistema, come la barra di navigazione e la tastiera.
Anche la storia del desktop è migliorata. Grazie alla funzionalità di zoom della modalità Dispositivo, puoi emulare schermi di computer più grandi di quello su cui stai lavorando, ad esempio uno schermo 4K (3840 x 2160 pixel).
Puoi limitare la rete direttamente dall'interfaccia utente della modalità Dispositivo, senza dover passare al riquadro Rete.
Differenze nelle origini
Quando esegui l'iterazione dello stile di un sito, è facile perdere il controllo delle modifiche. Per risolvere il problema, DevTools utilizzerà indicatori visivi nella barra laterale dei numeri di riga del riquadro Origini per aiutarti a tenere traccia delle modifiche. Le righe eliminate sono indicate con una linea rossa, quelle modificate sono evidenziate in viola e le nuove righe sono evidenziate in verde.
Potrai anche tenere traccia delle modifiche nella nuova scheda del riquadro Origine rapida:
Per la prima volta, la scheda Origine rapida ti consente di concentrarti sul codice sorgente HTML o JavaScript e contemporaneamente sulle regole CSS. Inoltre, quando fai clic su una proprietà CSS nel riquadro Stili, la scheda Origine rapida passa automaticamente alla definizione nella sorgente e la evidenzia.
Attiva l'esperimento Differenze tra le origini in Chrome Canary per provarlo oggi stesso.
Modifica Sass in tempo reale
Ecco un'anteprima di alcuni importanti miglioramenti imminenti al flusso di lavoro di modifica di Sass. Queste funzionalità sono nelle primissime fasi sperimentali. Ti ricontatteremo in un post successivo quando saranno disponibili per la prova.
In sostanza, DevTools ti consentirà di visualizzare e modificare le variabili Sass come hai sempre sperato. Fai clic su un valore compilato da una variabile Sass e la nuova scheda Origini rapide passa alla definizione della variabile.
Quando modifichi un valore compilato da una variabile Sass, la modifica viene applicata alla variabile Sass, non solo alla singola proprietà selezionata.
App web progressive
Dai un'occhiata all'elenco dei talk sul web e su Chrome a Google I/O 2016 e scoprirai un tema di grande rilievo nel mondo dello sviluppo web: le app web progressive.
Con l'emergere del modello di app web progressive, DevTools sta eseguendo rapidamente l'iterazione per fornire gli strumenti necessari agli sviluppatori per creare app web progressive straordinarie. Ci siamo resi conto che la creazione e il debug di queste applicazioni moderne spesso comportano requisiti unici, pertanto DevTools ha dedicato un intero riquadro allo sviluppo di Progressive Web App. Apri Chrome Canary e vedrai che il riquadro Risorse è stato sostituito dal riquadro Applicazione. Tutte le funzionalità precedenti del riquadro Risorse sono ancora disponibili. Esistono solo alcuni nuovi riquadri progettati appositamente per lo sviluppo di app web progressive:
Il riquadro Manifest fornisce una rappresentazione visiva del file manifest dell'app. Da qui puoi attivare manualmente il flusso di lavoro "Aggiungi alla schermata Home".
Il riquadro Service worker ti consente di ispezionare e interagire con il service worker registrato per la pagina corrente.
Inoltre, il riquadro Cancella dati archiviati ti consente di cancellare tutti i tipi di dati in modo da visualizzare una pagina vuota.
JavaScript
Superare il confine tra frontend e backend è una parte difficile dello sviluppo web full stack. Se durante il debug di un'app web scopri che il tuo backend restituisce un codice di stato 500, significa che hai raggiunto il limite dell'utilità di DevTools e devi cambiare contesto e avviare l'ambiente di sviluppo backend per risolvere il problema.
Tuttavia, con i backend scritti in Node.js, i confini tra frontend e backend iniziano a sfumarsi. Poiché Node.js viene eseguito sul motore JavaScript V8 (lo stesso motore alla base di Google Chrome), volevamo rendere possibile il debug di Node.js da DevTools. Grazie a V8, DevTools e alla piattaforma Google Cloud per i team Node.js, ora puoi utilizzare tutte le potenti funzionalità di debug di DevTools per eseguire l'introspezione di un'app Node.js. La funzionalità ha già raggiunto le build notturne di Node.js, anche se l'integrazione di DevTools è ancora in fase di perfezionamento prima di essere inclusa in una release principale. Un giorno, il debug dell'app Node.js da DevTools sarà semplice come passare node --inspect app.js e connettersi da DevTools in qualsiasi finestra di Chrome.
Sebbene gli strumenti esistenti come Node Inspector offrano esperienze di debug basate su GUI, la nuova integrazione di DevTools per Node.js rimarrà aggiornata con le ultime funzionalità di debug di DevTools, come il debug dello stack asincrono, il blackboxing e il supporto di ES6.