Novità su DevTools, sempre aggiornate
La prima notizia di questo post è un piccolo meta: è l'aggiornamento stesso. Di tanto in tanto, ma almeno una volta al mese, ti farò un riepilogo di ciò che accade nel mondo di Chrome DevTools, appena fuori dalla stampa.
Quando dico "fresco", intendo dire: parlerò delle nuove funzioni che sono arrivate in Chrome Canary, quindi se preferisci rimanere in terra stabile, è fantastico. Ma se hai avventura e vuoi rimanere al passo, questi post fanno al caso tuo. Oltre alle ultime funzionalità e alle correzioni di bug, alla fine di ogni post troverai una sezione Battito cardiaco della community, in cui sono evidenziati i migliori contributi dei nostri amati utenti.
Senza ulteriori indugi, analizziamo le notizie vere.
Novità in DevTools
Screenshot simili a rullino in Network e Spostamenti
Solo una settimana fa abbiamo abbandonato la sperimentazione di una nuova importante funzionalità: la possibilità di acquisire screenshot della pagina sia nella scheda Rete sia nella scheda Spostamenti.
Nel riquadro Rete, fai clic sulla piccola icona della fotocamera per abilitare l'acquisizione di fotogrammi, quindi ricarica la pagina per attivare l'acquisizione. A parte gli screenshot acquisiti con altri strumenti come WebPageTest, al momento mostriamo solo i frame che provengono in realtà da una versione di Paint.
Se fai doppio clic su uno dei frame viene visualizzata una visualizzazione ingrandita (quindi utilizza le frecce sinistra/destra per spostarti), mentre se passi il mouse sopra vengono visualizzate delle linee nel riquadro e nella sequenza temporale per visualizzare esattamente il momento in cui il frame è stato acquisito e poter così correlare alla sequenza di caricamento. In questo modo è molto più semplice eseguire il debug di problemi di caricamento comuni come il blocco dei caratteri web.
Nel riquadro Cronologia, puoi attivare l'acquisizione di screenshot attivando/disattivando la casella di controllo "Screenshot" nella barra degli strumenti in alto. Le cose funzionano in modo leggermente diverso qui rispetto al riquadro Network: in questo caso, cerchiamo di acquisire tutte le volte che possiamo, indipendentemente dai colori effettivi, per poter rilasciare screenshot di questo tipo su una scala temporale lineare correlata alle altre righe in Spostamenti. Invece di dover fare doppio clic per visualizzare un'anteprima, i frame ingranditi vengono visualizzati al passaggio del mouse.
Poiché le due funzionalità sono un po' fuori sincronizzazione in termini di funzionalità e UX, ti invitiamo a provarle e a fornire eventuali feedback tramite ticket sul sito crbug.com/new o tramite tweet a @ChromeDevTools.
Limitazione della rete nel riquadro Rete
La limitazione di rete, una funzione che abbiamo aggiunto in occasione dell'introduzione della Modalità dispositivo, ha trovato la sua seconda posizione nella barra degli strumenti del riquadro Rete, per consentirti di concentrarti sulle ottimizzazioni della rete in un unico posto.
La nuova casa, però, è solo uno specchio: è ancora disponibile fuori dalla Modalità dispositivo, dato che simulare una cattiva connettività è ancora molto importante quando si cerca di rendere il sito reattivo.
Infine, sei una di quelle povere anime che si sono chiesti perché la tua connessione Internet si interrompe dopo una lunga giornata di lavoro per poi scoprire che hai dimenticato di disattivare la limitazione della rete? La scheda del riquadro Rete ora mostra un'icona di avviso quando la limitazione della rete è attiva.
Varie informazioni utili
- Hai odiato quei cerchi strani nella sequenza temporale della rete? Anche noi. Si tratta dei punti nel tempo in cui è stato acquisito un fotogramma (nella nuova pellicola). Ora vengono visualizzate come linee quando passi il mouse sopra.
- La Modalità dispositivo conserva ora l'orientamento quando passi da un dispositivo all'altro
Heartbeat della community
Riposo e sporco con Chrome DevTools
Bret Little ha pubblicato questo piccolo corso dettagliato che ti consente di familiarizzare con le funzionalità di base di DevTools, ma offre anche molti suggerimenti utili approfonditi. Qui troverai informazioni estremamente utili e altri documenti DevTools non guastano.
UN IDE DevTools...?!
Kenneth Auchenberg, sviluppatore web e appassionato di DevTools, ha sviluppato un'app DevTools autonoma proof of concept alcuni mesi fa e in qualche modo il suo post del blog ha pubblicato di nuovo notizie (hacker) questa settimana.
Trasformare DevTools in un IDE completo è un'idea divertente, che molti dei membri del nostro team sognavano prima, ma che sarebbe anche un progetto di proporzioni epiche.
Cosa ne pensi? L'IDE DevTools è un sogno a pipa o potresti vederlo funzionare? Che aspetto dovrebbe avere? Fatecelo sapere nei commenti.
A presto.
Paul Bakaus e il team DevTools