Scopri in che modo DevTools si evolve per la prima volta con la nuova modalità dispositivo semplificata e sempre attiva. Utilizza i pulsanti colorati per aggiungere rapidamente i colori ai selettori e scoprire quali novità arriveranno a breve in DevTools.
Uno sguardo al futuro della creazione di contenuti
Siamo appena tornati al Chrome Dev Summit, dove ho mostrato l'aspetto attuale e futuro di DevTools. Di solito non parlo di funzionalità che sono ancora esperimenti o grossi lavori di avanzamento in questa sintesi, ma questa volta faccio un'eccezione. Se non hai tempo per guardare l'intero discorso, ecco il concetto:
Modalità dispositivo versione 2
Stiamo ancora lavorando a questa nuova e audace iterazione della Modalità dispositivo, ma volevamo dare a tutti l'opportunità di provarla, pertanto l'abbiamo attivata oggi stesso nella versione Canary. Con le modifiche apportate, stiamo spingendo DevTools in un futuro orientato ai dispositivi mobili, in cui lo sviluppo mobile è l'impostazione predefinita e lo sviluppo desktop è il "componente aggiuntivo".
Ispezione efficace delle animazioni
Lo strumento di ispezione dell'animazione in corso ti offre un quadro completo e dettagliato di ciò che accade in qualsiasi oggetto in 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 stai vedendo. Guarda il video. Renderemo disponibile un post del blog più ampio e autonomo non appena la versione sarà completata.
Modalità layout (anteprima)
Non è ancora pronta per il lancio ufficiale, ma è molto promettente la nuova modalità Layout, una funzionalità che non vedo l'ora di avere a disposizione completamente. La modalità di layout aggiunge funzionalità di modifica WYSIWYG a DevTools per qualsiasi elemento della pagina. Finora è possibile modificare altezza, larghezza, spaziature e margini nel contesto. Ci vorrà più tempo per fartelo provare, ma vi terremo al corrente.
Profilazione del rendimento con il riquadro Spostamenti aggiornato
Nell'ambito dell'introduzione del nuovo modello di prestazioni RAIL, sono state apportate centinaia di modifiche più piccole e più ampie al riquadro Spostamenti e, insieme, hanno trasformato e migliorato notevolmente la storia della profilazione delle prestazioni. Quindi, invece di mostrare ogni singola modifica in modo isolato, il nostro Paul Ireland ci ha mostrato come eseguire correttamente il debug delle prestazioni di un sito, in questo caso il sito per dispositivi mobili di Hotel Tonight, dal vivo sul palco. Tra le nuove funzionalità annunciate ci sono le strisce di caricamento e rendimento, la struttura a cascata della rete inclusa, il riepilogo delle visualizzazioni ad albero e la possibilità di visualizzare i costi delle prestazioni per dominio e file.
Aggiungi facilmente colori in primo piano e sfondo a qualsiasi elemento
Ogni volta che volevi aggiungere una proprietà colore di sfondo o colore all'elemento, non potevi semplicemente aprire il selettore colori. Invece, la maggior parte di voi digita qualcosa come "sfondo: rosso", ogni volta che appare l'icona del selettore colori e poi sceglie il colore desiderato.
Abbiamo pensato di semplificare la procedura. Abbiamo aggiunto due utili pulsanti che vengono visualizzati quando passi il mouse sull'angolo in basso a destra di un selettore, consentendoti di aggiungere un colore e di aprire il selettore con un solo clic:
Il meglio del resto
- Abbiamo sprecato molti spazi precedenti nel riquadro Stile mostrando tipi di media generici. Ora nascondiamo questi elementi prima dei tuoi selettori, se non sono insoliti.
- Ora puoi passare a lungo il mouse sopra un selettore CSS nel riquadro Stile per vedere a quanti elementi della pagina viene applicato.
- Non hai ancora rinunciato alla stampa? L'emulazione dei supporti di stampa è ancora disponibile per vedere come apparirà la tua pagina una volta stampata. L'abbiamo appena spostata nelle impostazioni di rendering.
- Quando scegliamo un elemento da ispezionare, ora espandiamo e chiudiamo automaticamente la struttura secondaria DOM pertinente. Difficile da spiegare, vedere per credere.
Come sempre, facci sapere cosa ne pensi tramite Twitter o leggi i commenti riportati di seguito e invia i bug all'indirizzo crbug.com/new.
Al prossimo mese!
Paul Bakaus e il team DevTools