Novità di DevTools (Chrome 64)

Kayce Basques

Siamo felici di rivederti. Le nuove funzionalità di DevTools in Chrome 64 includono:

Continua a leggere o guarda la versione video di queste note di rilascio di seguito.

Monitoraggio delle prestazioni

Utilizza il Monitoraggio prestazioni per ottenere una visualizzazione in tempo reale di vari aspetti del caricamento o del rendimento in fase di esecuzione di una pagina, tra cui:

  • Utilizzo della CPU.
  • Dimensioni dell'heap di JavaScript.
  • Il numero totale di nodi DOM, listener di eventi JavaScript, documenti e frame nella pagina.
  • Layout e ricalcoli dello stile al secondo.

Se gli utenti segnalano che la tua app è lenta o instabile, controlla Performance Monitor per trovare degli indizi.

Perché le prestazioni di caricamento sono importanti: BookMyShow ha registrato un aumento dell'80% delle conversioni quando ha creato un'app web progressiva incentrata sulla velocità. Scopri di più.

Per utilizzare il monitoraggio delle prestazioni:

  1. Apri il menu dei comandi.

  2. Inizia a digitare Performance, quindi seleziona Show Performance Monitor.

    Monitoraggio delle prestazioni Figura 1. Il monitoraggio delle prestazioni

  3. Fai clic su una metrica per mostrarla o nasconderla. Nella Figura 1 sono mostrati i grafici Utilizzo della CPU, Dimensioni heap JS e Appositi ascoltatori di eventi.

Funzionalità correlate:

  • Riquadro Rendimento. Esplora un Critical User Journey e registra tutto ciò che accade sulla pagina, tra cui l'attività JavaScript, le richieste di rete, l'utilizzo della CPU e molto altro ancora. Può essere utilizzato anche per analizzare il rendimento del caricamento. Scopri di più.
  • Riquadro Controlli. Esegui una suite di test automatici sul carico e sul rendimento in fase di esecuzione su qualsiasi URL. Scopri di più.

Se stai appena iniziando ad analizzare il rendimento, il percorso consigliato è utilizzare prima il riquadro Controlli e poi approfondire l'argomento utilizzando il riquadro Rendimento o il monitoraggio del rendimento.

Barra laterale della console

Nei siti di grandi dimensioni, la Console può essere rapidamente inondata di messaggi irrilevanti. Utilizza la nuova barra laterale della console per ridurre il rumore e concentrarti sui messaggi che sono importanti per te.

Utilizzare la barra laterale della console per mostrare solo i messaggi di errore

Figura 2. Utilizzare la barra laterale della console per mostrare solo i messaggi di errore

La barra laterale della console è nascosta per impostazione predefinita. Fai clic su Mostra barra laterale della console Mostra barra laterale della console per visualizzarla.

Funzionalità correlate:

  • Casella di testo Filtro. Inserisci del testo e Console mostrerà solo i messaggi che includono quel testo. Supporta anche pattern regex, filtri negativi e filtri URL.

Raggruppare messaggi della console simili

Ora la console raggruppa i messaggi simili per impostazione predefinita. Ad esempio, nella Figura 3 sono presenti 27 istanze del messaggio [Violation] Avoid using document.write().

Un esempio di raggruppamento di messaggi simili nella console

Figura 3. Un esempio di raggruppamento di messaggi simili nella console

Fai clic su un gruppo per espanderlo e visualizzare ogni istanza del messaggio.

Un esempio di gruppo espanso di messaggi della console

Figura 4. Un esempio di gruppo espanso di messaggi della console

Deseleziona la casella di controllo Raggruppa simili per disattivare questa funzionalità.

Funzionalità correlate:

Sostituzioni locali

Ci dispiace. Inizialmente avevamo pianificato di lanciare questa funzionalità in Chrome 64, ma abbiamo deciso di posticipare il lancio a ridosso della scadenza per risolvere alcuni problemi. A quanto pare, l'interfaccia utente di Novità non si è aggiornata in tempo. Spiacenti.

Questa funzionalità è disponibile in Chrome 65, che verrà rilasciato circa 6 settimane dopo Chrome 64. Per saperne di più, consulta Sostituzioni locali. Se utilizzi Windows o Mac, puoi provare subito Chrome 65 scaricando Chrome Canary.

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.