Chrome Canary è stato un mese ricco di funzionalità. Continua a leggere per scoprire quali script di terze parti causano problemi di prestazioni sul tuo sito con la funzionalità Dettagli aggregati nella cronologia, come scegliere colori coerenti con la nuova tavolozza dei colori, come simulare il Wi-Fi delle conferenze con 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 colpa dei problemi di rendimento: dettagli aggregati in Spostamenti
Sui siti web odierni usiamo sempre più beacon, analisi, social, caricamenti dei caratteri e servizi pubblicitari di terze parti, a volte pochi di troppo. Per assicurarti che ciò non avvenga e per darti visibilità sul problema, stiamo introducendo dettagli aggregati nella cronologia.
Nella scheda Dettagli aggregati puoi concentrarti sulle funzioni costose o sull'intero albero delle chiamate, quindi suddividere i dati selezionati per dominio, sottodominio o URL distinti. Ad esempio, nella precedente cronologia del caricamento di una pagina, 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 riordinare la barra degli strumenti principale, abbiamo spostato le icone del riquadro a scomparsa, delle impostazioni e di agganciamento in un nuovo menu principale dedicato.
In particolare, il dock è diventato molto più semplice. Anziché dover premere a lungo sull'icona precedente, ogni posizione di dock ha una propria icona.
Oltre all'inserimento nel dock, abbiamo aggiunto l'accesso rapido ai file per la ricerca, le scorciatoie e la guida (che porta alla nuova home page).
Scopri DevTools tramite descrizioni comando migliorate
Abbiamo molti pulsanti in DevTools e sappiamo che non tutti si spiegano da soli. Abbiamo semplificato la scoperta delle azioni e delle relative scorciatoie sostituendo le descrizioni comando native del sistema con descrizioni comando personalizzate e coerenti con la piattaforma.
La nuova descrizione comando viene visualizzata molto più rapidamente e include le scorciatoie da tastiera (se presenti).
Crea profili di limitazione della rete personalizzati
Se le opzioni predefinite di Network Throttler sono troppo limitanti per i tuoi casi d'uso e ti serve un'opzione "Wi-Fi per conferenze" o, per nostalgia, vuoi passare alla vecchia scuola ed emulare una riga "110 Baud", siamo buone notizie per te. Abbiamo aggiunto un nuovo riquadro Impostazioni che ti consente di svolgere queste operazioni.
Tavolozze dei colori automatiche, materiali e personalizzate
Indipendentemente dal fatto che tu voglia ricreare i colori della magia o lavorare con una tavolozza dei colori esistente, il nuovo Selettore colori ti consente di scegliere una tavolozza dei colori coerente per il tuo sito.
Facendo clic sulla piccola icona del selettore accanto alla tavolozza, puoi scegliere tra le seguenti opzioni:
- Colori della pagina: questa tavolozza è generata automaticamente dai colori trovati nel codice CSS ed è un'ottima opzione se stai estendendo un sito esistente.
- Material Design: la tavolozza di Material Design, che offre subito splendidi colori, è la scelta ideale quando inizi un nuovo progetto. In questo momento troverai tutti i colori primari, ma presto saranno disponibili tutte le tonalità.
- Personalizzato: è il tuo spazio personale. Aggiungi nuovi colori scegliendone uno nel selettore, poi fai clic sull'icona "più" accanto alla tavolozza. Riordinali trascinandoli e facendo clic con il tasto destro del mouse per visualizzare altre opzioni, come ad esempio Rimuovi.
Facci sapere la tua opinione e come potremmo aggiungere ulteriormente la storia sui colori.
Il meglio del resto
- Le richieste effettuate utilizzando l'API fetch() vengono ora mostrate nel riquadro Network
- Il layout automatico dei riquadri assicura che i riquadri di DevTools
si adattino ai nuovi vincoli di spazio. - La sezione Ispeziona elementi e modalità dispositivo presenta una serie di nuove icone.
- Ora gli attributi nel riquadro DOM hanno un colore diverso anche quando il nodo è evidenziato. (erano tutti bianchi prima).
- Gli elementi nascosti (attivati premendo "h" su un nodo DOM selezionato) ora mostrano un indicatore a cerchio grigio a sinistra, mentre i punti di interruzione del DOM fanno lo stesso con un cerchio blu. Questa procedura è analoga agli indicatori arancioni già presenti per forzare uno stato dell'elemento come :hover.
Come sempre, facci sapere cosa ne pensi tramite Twitter o leggi i commenti di seguito e invia i bug a crbug.com/new.
Al prossimo mese.
Paul Bakaus e il team di DevTools