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, riassumerò le ultime novità nel mondo di DevTools di Chrome.
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 sei interessato a sperimentare 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 strisce di pellicola in Rete e Spostamenti
Solo una settimana fa abbiamo tolto da una fase sperimentale una nuova funzionalità importante: la possibilità di acquisire screenshot della pagina sia nella scheda Rete sia nella scheda Spostamenti.
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 visualizzata una visualizzazione ingrandita (quindi utilizza le frecce sinistra/destra per navigare), mentre se passi il mouse sopra vengono visualizzate linee nel riquadro e nella sequenza temporale per visualizzare esattamente quando è stato acquisito il frame, in modo da poterlo correlare alla sequenza di caricamento. In questo modo, il debug dei problemi di caricamento comuni, come i caratteri web che bloccano il rendering, è molto più semplice.
Nel riquadro Sequenza temporale, puoi attivare l'acquisizione di screenshot attivando o 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 il più spesso possibile, indipendentemente dalle pitture effettive, per poter inserire gli screenshot in un lasso di tempo lineare correlato alle altre righe di Spostamenti. 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 connettività scadente è 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 non funziona dopo una lunga giornata di lavoro, per poi 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 banda è attivata.
Varie curiosità
- Non ti piacevano 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 mantiene l'orientamento quando passi da un dispositivo all'altro
Battito cardiaco della community
Informazioni dettagliate su Chrome DevTools
Bret Little ha pubblicato questo bellissimo corso di procedura dettagliata che ti consente di conoscere le funzionalità di base di DevTools, ma offre anche molti suggerimenti e trucchi 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