Novità di DevTools (Chrome 64)

Kayce Basques
Kayce Basques
X GitHub

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

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

Monitoraggio delle prestazioni

Utilizza Performance Monitor per visualizzare in tempo reale vari aspetti del caricamento o delle prestazioni di runtime di una pagina, tra cui:

  • Utilizzo CPU.
  • Dimensioni dell'heap 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 presenta problemi, controlla Performance Monitor per trovare indizi.

Perché le prestazioni di caricamento sono importanti: BookMyShow ha registrato un aumento dell'80% delle conversioni quando ha creato una Progressive Web App 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 vengono mostrati i grafici Utilizzo della CPU, Dimensioni heap JS e Listener di eventi JS.

Funzionalità correlate:

  • Pannello Rendimento. Percorri un percorso utente critico e registra tutto ciò che accade sulla pagina, inclusi l'attività JavaScript, le richieste di rete, l'utilizzo della CPU e molto altro ancora. Può essere utilizzato anche per analizzare le prestazioni di caricamento. Scopri di più.
  • Riquadro Controlli. Esegui una suite di test automatici di carico e rendimento di runtime su qualsiasi URL. Scopri di più.

Se hai appena iniziato ad analizzare il rendimento, il percorso consigliato è utilizzare prima il riquadro Audit e poi approfondire l'analisi utilizzando il riquadro Rendimento o il monitor Rendimento.

Barra laterale della console

Sui 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 importanti per te.

Utilizzo della barra laterale della console per mostrare solo i messaggi di errore

Figura 2. Utilizzo della 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 la console mostrerà solo i messaggi che lo includono. Supporta anche i pattern regex, i filtri negativi e i filtri URL.

Raggruppa i messaggi simili della console

Per impostazione predefinita, la console ora raggruppa i messaggi simili. 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.

Esempio di un gruppo espanso di messaggi della console

Figura 4. Esempio di un gruppo espanso di messaggi della console

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

Funzionalità correlate:

Override locali

Ci dispiace. Inizialmente avevamo previsto il lancio di questa funzionalità in Chrome 64, ma l'abbiamo ritirata poco prima della scadenza per perfezionarla. A quanto pare, la UI Novità non è stata aggiornata in tempo. Spiacenti.

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

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.

Novità di DevTools

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