È stato un mese ricco di funzionalità per 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 le 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 costose o sull'intero albero delle chiamate, quindi suddividere i dati selezionati in base a dominio, sottodominio o URL distinti. Ad esempio, nella sequenza temporale di un caricamento pagina sopra riportata, puoi ora 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 autoesplicativi. 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 Network Throttler sono troppo limitate per i tuoi casi d'uso e hai bisogno di un'opzione "Conference Wi-Fi" o, per motivi di nostalgia, vuoi andare alla vecchia maniera ed emulare una riga da 110 Baud, ho buone notizie per te. Abbiamo aggiunto un nuovo riquadro Impostazioni che ti consente di eseguire qualsiasi operazione tra quelle elencate sopra.
Tavolozze dei colori automatiche, Material e personalizzate
Che tu voglia ricreare i colori della magia o utilizzare una tavolozza dei colori esistente, il selettore di colori migliorato ti consente di scegliere una tavolozza dei 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'ottima opzione se stai estendendo un sito esistente.
- Material Design: la tavolozza di Material Design offre splendidi colori fin da subito ed è la scelta ideale quando si avvia 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 assicura che il ridimensionamento dei riquadri
DevTools si adatti ai nuovi vincoli di spazio. - Ispeziona elemento e modalità Dispositivo ha un insieme di nuove icone.
- Gli attributi nel riquadro DOM ora hanno un colore 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 sulla sinistra, mentre i punti di interruzione DOM funzionano allo stesso modo 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 nei commenti qui sotto e invia i bug a crbug.com/new.
A presto!
Paul Bakaus e il team DevTools