Novità di DevTools (Chrome 77)

Kayce Basques

Copiare 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.

Copia gli stili.

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, continua a perderti perché i contenuti saltano. Questo problema è chiamato scorrimento del layout. In genere si verifica quando le immagini e gli annunci terminano di caricarsi. 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 far spazio. La soluzione è utilizzare i segnaposto.

Ora DevTools può aiutarti a rilevare i cambiamenti di 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.

Una variazione del layout.

Figura 2. Una variazione del layout.

Problema di Chromium 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 sia possibile aggiungere una PWA a una schermata Home di iOS.
  • Mantieni un numero ridotto di richieste e dimensioni dei file ridotte. Indica 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.
  • First Input Delay potenziale max. 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 First Input Delay potenziale massimo non viene preso in considerazione nel punteggio della categoria di rendimento.

La nuova interfaccia utente del riquadro Controlli.

Figura 3. La nuova interfaccia utente del riquadro Controlli.

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

  • Budget basati sul rendimento. Evita che il tuo sito peggiori nel tempo specificando il numero di richieste e le dimensioni dei file che le pagine non devono superare.
  • Plug-in. Estendi Lighthouse con i tuoi controlli personalizzati.
  • Stack Pack. Aggiungi controlli personalizzati per stack tecnologici specifici. Il pacchetto WordPress Stack è 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 breakpoint

Premi Control+Alt+B o Comando+Opzione+B (Mac) quando l'Editor del riquadro Origini è attivo per aprire l'Editor di breakpoint. Utilizza l'editor dei punti di interruzione per creare punti di log e punti di interruzione condizionali.

L'editor dei punti di interruzione.

Figura 4. L'editor dei punti di interruzione.

Cache di prelettura nel riquadro Rete

La colonna Dimensioni del riquadro Rete ora indica (prefetch cache) quando una risorsa è stata caricata dalla cache di precaricamento. Il prefetch è una funzionalità relativamente nuova della piattaforma web che consente di velocizzare i caricamenti delle pagine successive. La pagina Posso utilizzare… indica che questa funzionalità è supportata nell'83,33% dei browser a livello globale a partire da luglio 2019.

La colonna Dimensioni indica che le risorse provengono dalla cache di precaricamento.

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

Per provarlo, consulta la demo del prefetch.

Problema di Chromium 935267

Proprietà private durante la visualizzazione degli oggetti

La console ora mostra i campi di classe privati nelle anteprime degli oggetti.

Quando ispezioni un oggetto, la console ora mostra i campi privati come "#color".

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

Notifiche e messaggi push nel riquadro Applicazioni

La sezione Servizi in background del riquadro 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 uno script di pagina o un worker di servizio mostra informazioni all'utente.

Come per le funzionalità di recupero in background 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.

I nuovi riquadri Notifiche e Messaggi push.

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

Problema di Chromium 927726

Scaricare i canali di anteprima

Valuta la possibilità di utilizzare Chrome Canary, Dev o Beta come browser di sviluppo predefinito. Questi canali di anteprima ti consentono di accedere alle funzionalità più recenti di DevTools, di testare API di piattaforme web all'avanguardia e di trovare i problemi sul tuo sito prima che lo facciano i tuoi utenti.

Contatta il team di Chrome DevTools

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

Novità di DevTools

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