Novità di DevTools (Chrome 77)

Kayce Basques

Copia gli stili dell'elemento

Fai clic con il pulsante destro del mouse su un nodo nell'albero DOM per copiare il CSS del nodo DOM negli appunti.

Figura 1. Copia gli stili degli elementi.

Grazie Adam Argyle e VisBug per l'ispirazione.

Visualizza le variazioni del layout

Supponiamo che tu stia leggendo un articolo sul tuo sito web preferito. Mentre leggi la pagina, perdendo sempre la posizione perché i contenuti fluttuano. Questo problema è chiamato layout in continua evoluzione. In genere questo accade al termine del caricamento delle immagini e degli annunci. La pagina non ha prenotato spazi per le immagini e gli annunci, quindi il browser deve spostare tutti gli altri contenuti verso il basso per fare spazio che li rappresentano. La soluzione consiste nell'utilizzare i segnaposto.

DevTools ora può aiutarti a rilevare le variazioni del layout:

1. Apri il menu dei comandi.
2. Inizia a digitare Rendering.
3. Esegui il comando Mostra rendering.
4. Attiva la casella di controllo Regioni con variazioni del layout. Quando interagisci con una pagina, le variazioni del layout vengono evidenziato in blu.

Figura 2. Una variazione del layout.

Problema di Chromium n. 961846

Lighthouse 5.1 nel riquadro Controlli

Nel riquadro Controlli è ora in esecuzione Lighthouse 5.1. I nuovi controlli includono:

• Fornisce un valore apple-touch-icon valido. Controlla che una PWA possa essere aggiunta a una schermata Home di iOS.
• Mantieni bassi il numero di richieste e le dimensioni dei file. Segnala il numero totale di richieste di rete e dimensioni di file per varie categorie, come documenti, script, fogli di stile, immagini e così via.
• Potenziale First Input Delay massimo. Misura il tempo potenziale massimo tra l'interazione con la prima pagina e la risposta del browser a tale interazione. Tieni presente che questa metrica sostituisce la metrica Latenza input stimata. Il First Input Delay potenziale massimo non tiene conto nel punteggio della categoria Rendimento.

Figura 3. La nuova UI del riquadro Controlli.

Le versioni Node e CLI di Lighthouse 5.1 offrono 3 nuove funzionalità principali che vale la pena provare:

• Budget del rendimento. Impedisci al tuo sito di regredire nel tempo specificando una richiesta e le dimensioni dei file che le pagine non devono superare.
• plug-in. Estendi Lighthouse con controlli personalizzati.
• Stack Pack. Aggiungi controlli su misura per stack tecnologici specifici. Stack Pack WordPress spediti prima. React e gli Stack Pack AMP sono in fase di sviluppo.

Sincronizzazione dei temi del sistema operativo

Se utilizzi il tema scuro del tuo sistema operativo, DevTools ora passa al suo tema scuro. automaticamente.

Scorciatoia da tastiera per aprire l'editor dei punti di interruzione

Premi Ctrl+Alt+B oppure Comando+Opzione+B (Mac) quando lo stato attivo è nell'editor del riquadro Origini per aprire l'editor dei punti di interruzione. Utilizza l'editor dei punti di interruzione per creare punti di log e Punti di interruzione condizionali.

Figura 4. L'editor dei punti di interruzione.

Precarica la cache nel riquadro Rete

La colonna Dimensioni del riquadro Rete ora indica (prefetch cache) quando è stata caricata una risorsa da nella cache di precaricamento. Precaricamento è una nuova funzionalità della piattaforma web che consente di velocizzare il caricamento della pagina successiva viene caricato automaticamente. Can I use... indica che è supportato nell'83,33% dei browser globali a luglio 2019.

Figura 5. La colonna Dimensioni mostra che prefetch2.html e prefetch2.css provengono da (prefetch cache).

Vedi la demo di precaricamento per provarla.

Problema di Chromium n. 935267

Proprietà private durante la visualizzazione degli oggetti

La console ora mostra i campi dei corsi privati nelle anteprime degli oggetti.

Immagine 6. La versione precedente di Chrome a sinistra non mostra il campo #color durante l'ispezione del mentre la nuova versione a destra sì.

Notifiche e messaggi push nel riquadro Applicazione

La sezione Servizi in background del riquadro Applicazione ora supporta i messaggi push e Notifiche. I messaggi push si verificano quando un server invia informazioni a un service worker. Le notifiche vengono visualizzate quando un service worker o uno script di pagina mostra informazioni all'utente.

Come per le funzionalità di recupero in background e sincronizzazione in background di Chrome 76, una volta avviato i messaggi push e le notifiche in questa pagina vengono registrati per 3 giorni, anche quando è chiuso, anche quando Chrome è chiuso.

Immagine 7. I nuovi riquadri Messaggi push e Notifiche nel riquadro Applicazione.

Problema di Chromium n. 927726

Scaricare i canali in anteprima

Prendi in considerazione l'utilizzo di Chrome Canary, Dev o Beta come browser di sviluppo predefinito. Questi canali di anteprima ti consentono di accedere alle funzionalità più recenti di DevTools, testare le API delle piattaforme web all'avanguardia e individuare i problemi sul tuo sito prima che lo facciano gli utenti.

Contattare il team di Chrome DevTools

Utilizza le seguenti opzioni per discutere delle nuove funzionalità e modifiche nel post o di qualsiasi altra informazione relativa a DevTools.

• Inviaci un suggerimento o un feedback tramite crbug.com.
• Segnala un problema di DevTools utilizzando Altre opzioni   > Guida > Segnala un problema di DevTools in DevTools.
• Invia un tweet all'indirizzo @ChromeDevTools.
• Lascia commenti sulle novità nei video di YouTube di DevTools o nei video di YouTube dei suggerimenti di DevTools.

Novità di DevTools

Un elenco di tutto ciò che è stato trattato nella serie Novità di DevTools.