Novità di DevTools (Chrome 77)

Kayce Basques

Copia gli stili dell'elemento

Fai clic con il tasto 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 ad Adam Argyle e VisBug per l'ispirazione.

Visualizzare le variazioni del layout

Supponiamo che tu stia leggendo un articolo di notizie sul tuo sito web preferito. Mentre leggi la pagina, perdi continuamente il segno perché i contenuti saltano. Questo problema è chiamato spostamento del layout. Di solito si verifica al termine del caricamento di immagini e annunci. La pagina non ha riservato spazio per le immagini e gli annunci, quindi il browser deve spostare tutti gli altri contenuti verso il basso per fare spazio a questi elementi. La soluzione è utilizzare i segnaposto.

Ora DevTools può aiutarti a rilevare lo spostamento 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 di layout. Quando interagisci con una pagina, le variazioni del layout vengono evidenziate in blu.

Figura 2. Una variazione del layout.

Problema di Chromium n. 961846

Lighthouse 5.1 nel riquadro Controlli

Il riquadro Controlli ora esegue Lighthouse 5.1. I nuovi controlli includono:

• Fornisce un valore apple-touch-icon valido. Verifica che una PWA possa essere aggiunta a una schermata Home di iOS.
• Mantieni un numero ridotto di richieste e dimensioni dei file limitate. Riporta il numero totale di richieste di rete e le dimensioni dei file per varie categorie, come documenti, script, fogli di stile, immagini e così via.
• Maximum Potential First Input Delay. Misura il tempo potenziale massimo tra la prima interazione di un utente con la pagina e la risposta del browser a questa interazione. Tieni presente che questa metrica sostituisce la metrica Latenza di input stimata. Il potenziale massimo di First Input Delay non viene preso in considerazione nel punteggio della categoria Prestazioni.

Figura 3. La nuova UI del pannello Controlli.

Le versioni Node e CLI di Lighthouse 5.1 hanno tre nuove funzionalità principali da provare:

• Budget di rendimento. Impedisci al tuo sito di regredire nel tempo specificando i conteggi delle richieste e le dimensioni dei file che le pagine non devono superare.
• Plug-in. Estendi Lighthouse con i tuoi controlli personalizzati.
• Stack Pack. Aggiungi audit personalizzati per stack tecnologici specifici. Il pacchetto WordPress Stack Pack è stato spedito per primo. I pacchetti di stack React e AMP sono in fase di sviluppo.

Sincronizzazione del tema del sistema operativo

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

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

Premi Ctrl+Alt+B o Comando+Opzione+B (Mac) quando il cursore si trova 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.

Cache prefetch nel riquadro Network

La colonna Dimensioni del riquadro Network (Rete) ora mostra (prefetch cache) quando una risorsa è stata caricata dalla cache di precaricamento. Prefetch è una funzionalità della piattaforma web relativamente nuova che velocizza i caricamenti delle pagine successivi. I report Posso utilizzare... indicano che è supportato nell'83,33% dei browser globali a partire da luglio 2019.

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

Consulta la demo del precaricamento per provarlo.

Problema di Chromium n. 935267

Proprietà private durante la visualizzazione degli oggetti

La console ora mostra i campi delle classi private nelle anteprime degli oggetti.

Figura 6. La vecchia versione di Chrome a sinistra non mostra il campo #color quando si ispeziona l'oggetto, mentre la nuova versione a destra lo mostra.

Notifiche e messaggi push nel riquadro Applicazione

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

Come per le funzionalità di recupero e sincronizzazione in background di Chrome 76, una volta avviata la registrazione, i messaggi push e le notifiche in questa pagina vengono registrati per 3 giorni, anche quando la pagina è chiusa e 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 della piattaforma web all'avanguardia e trovare problemi sul tuo sito prima che lo facciano i tuoi utenti.

Contatta il team di Chrome DevTools

Utilizza le seguenti opzioni per discutere delle nuove funzionalità, degli aggiornamenti o di qualsiasi altro argomento relativo a DevTools.

• Inviaci feedback e richieste di funzionalità all'indirizzo crbug.com.
• Segnala un problema di DevTools utilizzando more_vert Altre opzioni > Guida > Segnala un problema di DevTools in DevTools.
• Invia un tweet a @ChromeDevTools.
• Lascia un commento sui video di YouTube Novità di DevTools o sui video di YouTube Suggerimenti di DevTools.

Novità di DevTools

Un elenco di tutti gli argomenti trattati nella serie Novità di DevTools.