Scopri come DevTools dà priorità ai dispositivi mobili con una nuova modalità dispositivo semplificata e sempre attiva. Utilizza i pulsanti dei colori per aggiungere rapidamente i colori ai selettori e scoprire le novità presto disponibili in DevTools.
Uno sguardo al futuro della creazione
Torniamo ora al Chrome Dev Summit, dove ti ho mostrato come sarà l'utilizzo di DevTools oggi e in futuro. Di solito non menzionerò funzionalità che sono ancora in fase sperimentale o di progressione in questa sintesi, ma questa volta faccio un'eccezione. Se non hai tempo per guardare l'intera discussione, ecco il punto:
Modalità dispositivo versione 2
Stiamo ancora lavorando a questa nuova e audace iterazione della modalità dispositivo ma volevamo offrire a tutti l'opportunità di provarla, quindi l'abbiamo attivata oggi stesso nella versione canary. Con queste modifiche, stiamo trasferendo DevTools a un futuro orientato ai dispositivi mobili, in cui lo sviluppo mobile è l'impostazione predefinita, mentre lo sviluppo desktop è il "componente aggiuntivo". Al termine, riceverai più iterazioni nelle prossime settimane con un post del blog esteso.
Controllo efficace delle animazioni
L'ispezione dell'animazione in corso ti offre un quadro completo e dettagliato di ciò che accade durante qualsiasi movimento. Invece di mostrare una transizione su un elemento alla volta, abbiamo aggiunto un'euristica che raggruppa animazioni complesse in modo che tu possa concentrarti su tutto ciò che vedi. Dai un'occhiata al video. Una volta completato il lancio, offriremo un post del blog indipendente più grande.
Modalità di layout (anteprima)
Non ancora pronta per il lancio, ma molto promettente è la nuova modalità di layout, una funzionalità che non vedo l'ora di vedere realizzata in modo completo. La modalità Layout aggiunge funzionalità di modifica WYSIWYG a DevTools per qualsiasi elemento della pagina. Finora, altezza, larghezza, spaziature interne e margini possono essere modificati nel contesto. Ci vorrà ancora un po' di tempo prima che saremo pronti a farti provare, ma ti aggiorneremo presto.
Profilazione del rendimento con il riquadro Cronologia aggiornato
Nell'ambito dell'introduzione del nuovo modello di prestazioni RAIL, abbiamo apportato centinaia di modifiche sempre più piccole al riquadro della sequenza temporale e insieme trasformano e migliorano notevolmente la storia della profilazione del rendimento. Quindi, invece di mostrare ogni singola modifica in modo isolato, il nostro Paul irlandese 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 nuove funzionalità annunciate ci sono le pellicole per il carico e le prestazioni, la struttura a cascata della rete inclusa, il riepilogo della visualizzazione ad albero e la possibilità di visualizzare i costi di rendimento per dominio e file.
Aggiungi facilmente colori di sfondo e in primo piano a qualsiasi elemento
Ogni volta che volevi aggiungere una proprietà colore di sfondo o colore all'elemento, non bastava aprire il selettore colori. Al contrario, la maggior parte di voi digita qualcosa come "sfondo: rosso"; ogni volta in modo che venga visualizzata l'icona del selettore colori, per poi scegliere il colore effettivo.
Abbiamo pensato di semplificare questo processo. Abbiamo aggiunto due utili pulsanti che vengono visualizzati quando si passa il mouse sopra l'angolo in basso a destra di un selettore, per aggiungere un colore e visualizzare il selettore con un solo clic:
Il meglio del resto
- Abbiamo sprecato una grande quantità di proprietà immobiliari precedenti nel riquadro Stile mostrando tipi di media generici. Ora nascondiamo questi contenuti 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 viene applicato.
- Non hai ancora rinunciato a stampare? L'emulazione dei contenuti multimediali di stampa è ancora disponibile per vedere come apparirà la tua pagina una volta stampata. L'abbiamo appena spostata nelle impostazioni di rendering.
- Quando si sceglie un elemento da esaminare, ora espandiamo e chiudiamo automaticamente l'albero secondario DOM pertinente. Difficile da spiegare, vedere per credere.
Come sempre, facci sapere cosa ne pensi tramite Twitter o nei commenti qui sotto e invia i bug a crbug.com/new.
Al prossimo mese!
Paul Bakaus e il team DevTools