Notizie su DevTools, sempre aggiornate
La prima notizia di questo post è un po' meta: si tratta di questo stesso aggiornamento. Di tanto in tanto, ma almeno una volta al mese, ti faccio un riepilogo di ciò che accade nel mondo di Chrome DevTools, appena pubblicato.
E quando dico nuove, intendo proprio nuove: parlerò di funzionalità appena arrivate in Chrome Canary, quindi se preferisci rimanere in un ambiente stabile, va bene lo stesso. Tuttavia, se ami le avventure e vuoi rimanere al passo con le tendenze, questi post fanno al caso tuo. Oltre alle ultime funzionalità e correzioni di bug, alla fine di ogni post troverai la sezione Battito della community, che mette in evidenza i contributi più importanti dei nostri amati utenti.
Senza ulteriori indugi, passiamo alle notizie.
Novità in DevTools
Screenshot simili a una pellicola in Rete e sequenza temporale
Appena una settimana fa abbiamo tolto la sperimentazione una nuova importante funzionalità: la possibilità di acquisire screenshot delle pagine nelle schede Rete e Cronologia.
Nel riquadro Rete, fai clic sulla piccola icona della videocamera per attivare l'acquisizione di frame, 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 effettivamente da un'immagine.
Se fai doppio clic su uno dei frame viene mostrata una visualizzazione ingrandita (quindi utilizza le frecce sinistra/destra per spostarti), se passi il mouse sopra i fotogrammi vengono visualizzate delle linee nel riquadro e nella sequenza temporale per visualizzare esattamente il momento dell'acquisizione del frame, il che ti consente di correlare la sequenza di caricamento. In questo modo, il debug dei problemi di caricamento più comuni, come i caratteri web che bloccano il rendering, è molto più semplice.
Nel riquadro della sequenza temporale puoi attivare l'acquisizione degli screenshot attivando/disattivando la casella di controllo "Screenshot" nella barra degli strumenti in alto. Qui le cose funzionano in modo un po' diverso rispetto al riquadro Rete: in questo caso, cerchiamo di acquisire screenshot il più spesso possibile, indipendentemente dalle vernici effettive, per poterli inserire in una sequenza temporale lineare correlata alle altre righe della cronologia. Anziché dover fare doppio clic per visualizzare un'anteprima, i frame con lo zoom vengono visualizzati al passaggio del mouse.
Poiché le due non sono molto sincronizzate in termini di funzionalità e UX, ti invitiamo a provare le funzionalità e a inviare eventuali feedback tramite i ticket su crbug.com/new o tramite tweet a @ChromeDevTools.
Limitazione della larghezza di banda della rete nel riquadro Rete
La limitazione della rete, una funzionalità che abbiamo aggiunto quando abbiamo introdotto la modalità Dispositivo, ha trovato la sua seconda casa nella barra degli strumenti del pannello della rete, in modo da poterti concentrare sulle ottimizzazioni della rete in un unico posto.
Questa nuova home page è solo uno specchio: è ancora disponibile al di fuori della modalità Dispositivo, poiché la simulazione di una scarsa connettività è ancora molto importante quando si lavora per rendere il sito adattabile.
Infine, sei una di quelle povere anime che si sono chieste perché la connessione a internet è interrotta dopo una lunga giornata di lavoro, per scoprire di aver dimenticato di disattivare la limitazione della rete? La scheda del riquadro Rete ora mostra un'icona di avviso quando la limitazione della rete è attivata.
Varie informazioni interessanti
- Non sopportavi quei cerchi strani nella sequenza temporale della rete? Anche noi. Si tratta di momenti in cui è stato acquisito un frame (nel nuovo filmato). Ora vengono visualizzate come linee quando passi il mouse sopra.
- La Modalità dispositivo ora conserva l'orientamento quando passi da un dispositivo all'altro
Heartbeat della community
Imparare a utilizzare Chrome DevTools
Bret Little ha rilasciato questo bel corso dettagliato che ti consente di acquisire familiarità con le funzionalità di base di DevTools, ma offre anche molti suggerimenti e consigli approfonditi. Ci sono informazioni sicuramente utili e non fa mai male avere più documentazione di DevTools.
Un IDE DevTools…?!
Kenneth Auchenberg, sviluppatore web e appassionato di DevTools, ha sviluppato alcuni mesi fa un'app DevTools autonoma di prova del concetto e, in qualche modo, il suo post del blog è stato di nuovo nelle notizie (hacker) questa settimana.
Trasformare DevTools in un IDE completo è un'idea divertente, che molti membri del nostro team hanno sognato in passato, ma sarebbe anche un progetto di proporzioni epiche.
Cosa ne pensi? L'IDE di DevTools è un sogno irrealizzabile o ritieni che possa funzionare? Come dovrebbe essere? Fatecelo sapere nei commenti.
A presto.
Paul Bakaus e il team di DevTools