La conferenza Google I/O 2016 è terminata. DevTools ha avuto una forte presenza durante l'I/O, con l'intervento di Paul Bakaus, Paul Ireland e Seth Thompson che illustra il futuro di DevTools. Dai un'occhiata al video di seguito o continua a leggere per saperne di più sulla premessa di DevTools nel 2016 e oltre.
In creazione
DevTools mira a semplificare ogni fase del ciclo di vita dello sviluppo web. Probabilmente sai già che DevTools può aiutarti a eseguire il debug o a profilare un sito web, ma potresti non sapere come utilizzarlo per creare un sito. Per "creazione" intendiamo l'atto di creare un sito. Uno degli obiettivi nel prossimo futuro è facilitare l'iterazione, la sperimentazione e l'emulazione del tuo sito su più dispositivi.
Modalità dispositivo
Il team DevTools continua a ottimizzare l'esperienza della Modalità dispositivo, che ha ricevuto il primo upgrade importante in Chrome 49. Dai un'occhiata al post di marzo (Una nuova modalità dispositivo per un mondo basato sui dispositivi mobili) per una panoramica degli aggiornamenti. L'obiettivo generale è fornire un flusso di lavoro semplice per la visualizzazione e l'emulazione del sito in tutti i fattori di forma.
Ecco un breve riepilogo di alcuni aggiornamenti della modalità dispositivo che sono arrivati in Canary dopo la pubblicazione dell'articolo a marzo.
Quando visualizzi una pagina come dispositivo specifico, puoi immergerti maggiormente 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 su computer è migliorata. Grazie alla funzionalità di zoom della Modalità dispositivo, puoi emulare schermi desktop più grandi dello schermo su cui stai effettivamente lavorando, ad esempio uno schermo 4K (3840 x 2160 px).
Puoi limitare la rete direttamente dall'interfaccia utente della modalità dispositivo anziché dover passare al riquadro Rete.
Differenze origine
Quando esegui l'iterazione dello stile di un sito, è facile perdere traccia delle modifiche. Per risolvere il problema, DevTools utilizzerà indicatori visivi nella grondaia del numero 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.
Inoltre, potrai tenere traccia delle modifiche nella nuova scheda a scomparsa Origine rapida:
Per la prima volta, la scheda Origine rapida ti consente di concentrarti sul codice sorgente HTML o JavaScript contemporaneamente alle regole CSS. Inoltre, quando fai clic su una proprietà CSS nel riquadro Stili, la scheda Origine rapida salta automaticamente ed evidenzia la definizione nella sorgente.
Attiva l'esperimento sulle differenze delle origini in Chrome Canary per provarlo oggi stesso.
Editing Sass dal vivo
Ecco un'anteprima di alcuni importanti miglioramenti imminenti al flusso di lavoro di modifica di Sass. Queste funzionalità sono ancora nelle prime fasi della fase sperimentale. Le seguiremo in un altro post quando saranno pronte per la prova.
In sostanza, DevTools ti consente di visualizzare e modificare le variabili Sass come speravi. 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 aggiorna la variabile Sass, non solo la singola proprietà selezionata.
App web progressive
Osserva l'elenco delle conversazioni web e Chrome alla conferenza Google I/O 2016 e vedrai emergere un tema importante nel mondo dello sviluppo web: le app web progressive.
Con la comparsa del modello di app web progressive, DevTools sta eseguendo rapidamente l'iterazione per fornire agli sviluppatori gli strumenti necessari per creare fantastiche app web progressive. Ci siamo resi conto che la creazione e il debug di queste applicazioni moderne spesso prevede requisiti unici, perciò DevTools ha dedicato un intero panel allo sviluppo di applicazioni web progressive. Apri Chrome Canary e vedrai che il riquadro Risorse è stato sostituito con il riquadro dell'applicazione. Tutte le funzionalità precedenti del riquadro Risorse sono ancora presenti. Ci sono solo alcuni nuovi riquadri progettati appositamente per lo sviluppo di app web progressive:
Il riquadro Manifest offre 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 consente di esaminare e interagire con il service worker registrato per la pagina corrente.
Il riquadro Cancella dati archiviati permette di cancellare tutti i tipi di dati in modo da poter visualizzare una pagina vuota.
JavaScript
Superare il confine tra frontend e backend è una parte difficile dello sviluppo web full stack. Se scopri che il tuo backend restituisce un codice di stato 500 durante il debug di un'app web, hai raggiunto il limite di utilità di DevTools, che richiede la modifica dei contesti e l'attivazione dell'ambiente di sviluppo del backend per eseguire il debug del problema.
Tuttavia, con i backend scritti in Node.js, i confini tra frontend e backend stanno iniziando a confondersi. Poiché Node.js viene eseguito sul motore JavaScript V8 (lo stesso motore su cui si basa Google Chrome), abbiamo voluto rendere possibile il debug di Node.js da DevTools. Grazie ai team V8, DevTools e Google Cloud Platform per Node.js, ora puoi utilizzare tutte le efficaci funzionalità di debug di DevTools per analizzare un'app Node.js. Questa 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. Il debug dell'app Node.js da DevTools sarà semplice come trasferire node --inspect app.js e connetterti da DevTools in qualsiasi finestra di Chrome.
Anche se gli strumenti esistenti come Node Inspector forniscono esperienze di debug basate su GUI, la nuova integrazione di DevTools in Node.js rimarrà al passo con le ultime funzionalità di debug di DevTools, come il debug asincrono dello stack, il blackboxing e il supporto di ES6.