Scopri come DevTools diventa mobile-first con una nuova modalità Dispositivo semplificata e sempre attiva. Utilizza i pulsanti dei colori per aggiungere rapidamente i colori ai selettori e scopri cosa sarà presto disponibile in DevTools.
Uno sguardo al futuro della creazione di contenuti
Siamo appena tornati dal Chrome Dev Summit, dove ti ho mostrato come funziona DevTools oggi e in futuro. Di solito non menziono in questo riepilogo le funzionalità che sono ancora in fase di sperimentazione o in fase di sviluppo, ma questa volta faccio un'eccezione. Se non hai tempo di guardare l'intero talk, ecco i concetti fondamentali:
Modalità dispositivo versione 2
Stiamo ancora lavorando intensamente a questa nuova e audace iterazione della modalità Dispositivo, ma volevamo dare a tutti la possibilità di provarla, quindi l'abbiamo attivata oggi nella versione Canary. Con queste modifiche, stiamo spingendo DevTools verso un futuro mobile-first in cui lo sviluppo mobile è l'impostazione predefinita e lo sviluppo desktop è il "componente aggiuntivo". Prevediamo altre iterazioni nelle prossime settimane e pubblicheremo un post del blog dettagliato al termine.
Ispezione delle animazioni efficace
L'ispezione dell'animazione in corso ti offre un quadro completo e dettagliato di ciò che sta accadendo su qualsiasi elemento in movimento. Anziché mostrare una transizione su un elemento alla volta, abbiamo aggiunto delle strategie di euristica che raggruppano le animazioni complesse in modo da poterti concentrare su tutto ciò che vedi. Dai un'occhiata al video. Al termine del lancio, pubblicheremo un post del blog più grande e autonomo.
Modalità layout (anteprima)
Non ancora pronta per il grande pubblico, ma molto promettente è la nuova modalità Layout, una funzionalità che non vedo l'ora di vedere completata. La modalità di layout aggiunge a DevTools funzionalità di modifica WYSIWYG per qualsiasi elemento della pagina. Finora, altezza, larghezza, spaziature e margini possono essere modificati in base al contesto. Ci vorrà ancora un po' di tempo prima che tu possa provarlo, ma ti aggiorneremo.
Profilazione del rendimento con il riquadro Spostamenti aggiornato
Nell'ambito di un più ampio impegno volto a introdurre il nuovo modello di rendimento RAIL, sono state apportate centinaia di modifiche, grandi e piccole, al riquadro Spostamenti nel tempo, che insieme trasformano e migliorano notevolmente la storia del profilo del rendimento. Pertanto, invece di mostrare ogni singola modifica in isolamento, il nostro Paul Irish ci ha mostrato come eseguire correttamente il debug del rendimento di un sito, in questo caso il sito mobile di Hotel Tonight, dal vivo sul palco. Tra le funzionalità appena annunciate figurano i film strip di caricamento e rendimento, la cascata di rete inclusa, il riepilogo della visualizzazione ad albero e la possibilità di visualizzare i costi di rendimento per dominio e file.
Aggiungi facilmente i colori di primo piano e di sfondo a qualsiasi elemento
Ogni volta che volevi aggiungere una proprietà background-color o color all'elemento, non potevi semplicemente aprire il selettore dei colori. La maggior parte di voi, invece, digita ogni volta qualcosa come "background: red;" per visualizzare l'icona del selettore colori, quindi sceglie il colore che preferisce.
Abbiamo pensato di poter semplificare la procedura. Abbiamo aggiunto due pratici pulsanti che vengono visualizzati quando passi il mouse sopra l'angolo in basso a destra di un selettore, che ti consentono di aggiungere un colore e visualizzare il selettore con un solo clic:
Il meglio del resto
- Abbiamo sprecato molto spazio nel riquadro Stile mostrando tipi di media generici. Ora nascondiamo questi elementi prima dei selettori, se non sono insoliti.
- Ora puoi passare il mouse sopra un selettore CSS nel riquadro Stile per vedere a quanti elementi della pagina si applica.
- Non hai ancora rinunciato alla stampa? L'emulazione di stampa è ancora disponibile per vedere l'aspetto della pagina quando viene stampata. L'abbiamo semplicemente spostata nelle Impostazioni di rendering.
- Quando scegli un elemento da ispezionare, ora viene espanso e chiuso automaticamente il sottoalbero DOM pertinente. Difficile da spiegare, vedere per credere.
Come sempre, facci sapere cosa ne pensi tramite Twitter o tramite i commenti di seguito e invia i bug all'indirizzo crbug.com/new.
A presto!
Paul Bakaus e il team di DevTools