È stato un mese ricco di funzionalità in Chrome Canary. Continua a leggere per scoprire quali script di terne parti causano problemi di prestazioni sul tuo sito con i dettagli aggregati in Spostamenti, come scegliere colori coerenti con la nuova tavolozza dei colori, come simulare la rete Wi-Fi della conferenza con i profili di rete personalizzabili e come ottenere di più dall'interfaccia utente di DevTools con il nuovo menu principale e descrizioni comando migliori.
Migliore assegnazione dei problemi di prestazioni: dettagli aggregati in Spostamenti
Sui siti web di oggi utilizziamo sempre più beacon, servizi di analisi, social, caricamento di caratteri e pubblicità di terze parti, a volte qualche uno di troppo. Per evitare che ciò accada e per darti visibilità sul problema, stiamo introducendo dettagli aggregati nella cronologia.
Nella scheda Dettagli aggregati, puoi concentrarti solo sulle funzioni dispendiose o sull'intero albero di chiamate, quindi suddividere i dati selezionati per dominio, sottodominio o URL distinti. Ad esempio, nella sequenza temporale del caricamento di una pagina riportata sopra, ora puoi attribuire facilmente i rallentamenti a script di terze parti provenienti da domini come facebook.net o twitter.com.
Nuovo menu principale dedicato
Per semplificare la barra degli strumenti principale, abbiamo spostato le icone del riquadro, delle impostazioni e dell'aggancio in un nuovo menu principale dedicato.
In particolare, l'aggancio è diventato molto più semplice. Anziché dover premere a lungo l'icona precedente, ogni posizione di aggancio ha la propria icona.
Oltre all'aggancio, abbiamo aggiunto la ricerca rapida dei file, le scorciatoie e la guida (che rimanda alla nuova home page).
Scopri DevTools tramite descrizioni comando migliorate
In DevTools sono disponibili molti pulsanti e sappiamo che non tutti sono chiari. Ora è più facile scoprire le azioni e le relative scorciatoie sostituendo le descrizioni comando native del sistema con descrizioni comando personalizzate e coerenti con la piattaforma.
Le nuove descrizioni comando vengono visualizzate molto più rapidamente e includono le scorciatoie da tastiera (se esistenti).
Creare profili di limitazione della larghezza di banda della rete personalizzati
Se le opzioni predefinite per il regolatore della larghezza di banda della rete sono troppo limitate per i tuoi casi d'uso e hai bisogno di un'opzione "Wi-Fi per conferenze" o, per motivi nostalgici, vuoi tornare alla vecchia scuola ed emulare una linea "110 baud", ho una buona notizia per te. Abbiamo aggiunto un nuovo riquadro Impostazioni che ti consente di eseguire tutte queste operazioni.
Tavolozze dei colori automatiche, Material e personalizzate
Che tu voglia ricreare i colori della magia o utilizzare una tavolozza di colori esistente, lo Strumento di selezione dei colori migliorato ti aiuta a scegliere una tavolozza di colori coerente per il tuo sito.
Se fai clic sulla piccola icona di attivazione/disattivazione accanto alla tavolozza, puoi scegliere tra le seguenti opzioni:
- Colori pagina: questa tavolozza viene generata automaticamente dai colori che troviamo nel tuo CSS, il che la rende un'opzione ideale se stai estendendo un sito esistente.
- Material Design: la tavolozza di Material Design offre colori bellissimi e pronti all'uso ed è la scelta ideale per iniziare un nuovo progetto. Al momento sono disponibili tutti i colori primari, ma a breve aggiungeremo tutte le tonalità.
- Personalizzato: il tuo parco giochi. Aggiungi nuovi colori scegliendone uno nel selettore, poi fai clic sull'icona "Più" accanto alla tavolozza. Cambia l'ordine trascinandoli e fai clic con il tasto destro del mouse per visualizzare altre opzioni, ad esempio la rimozione.
Facci sapere cosa ne pensi e come potremmo proseguire con la storia dei colori.
Il meglio del resto
- Le richieste effettuate utilizzando l'API fetch() vengono ora mostrate nel riquadro Rete
- Il layout automatico dei riquadri garantisce che, quando ridimensioni i riquadri di DevTools
, questi si adattino ai nuovi vincoli di spazio. - Ispeziona elemento e modalità Dispositivo ha un insieme di nuove icone.
- Gli attributi nel riquadro DOM ora sono colorati in modo diverso anche quando il nodo è evidenziato. (Prima erano tutte bianche).
- Gli elementi nascosti (attivati premendo "h" su un nodo DOM selezionato) ora mostrano un indicatore a forma di cerchio grigio a sinistra, così come le interruzioni DOM con un cerchio blu. È analogo agli indicatori arancioni che abbiamo già per forzare uno stato dell'elemento come :hover.
Come sempre, facci sapere cosa ne pensi tramite Twitter o i commenti di seguito e invia i bug all'indirizzo crbug.com/new.
A presto!
Paul Bakaus e il team di DevTools