Questa pagina è stata tradotta dall'API Cloud Translation.

Novità di DevTools (Chrome 64)

Kayce Basques

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

Monitoraggio delle prestazioni. Visualizza il rendimento di una pagina in tempo reale.
Barra laterale della console. Riduci il rumore di fondo nella console e concentrati sui messaggi importanti per te.
Raggruppa messaggi della console simili: La console ora raggruppa insieme i messaggi simili per impostazione predefinita.

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

Nota: controlla quale versione di Chrome è in uso su chrome://version. Se stai eseguendo una versione precedente, queste funzionalità non esisteranno. Se esegui una versione successiva, queste funzionalità potrebbero essere cambiate. Chrome si aggiorna automaticamente a una nuova versione principale ogni sei settimane circa.

Monitoraggio delle prestazioni

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

CPU utilizzata.
Dimensione heap JavaScript.
Il numero totale di nodi DOM, listener di eventi JavaScript, documenti e frame nella pagina.
Layout e ricalcoli di stile al secondo.

Se gli utenti segnalano che la tua app sembra lenta o insidiosa, controlla Performance Monitor per indizi.

Perché il rendimento del caricamento è importante: BookMyShow ha ottenuto un aumento dell'80% delle conversioni creando un'app web progressiva incentrata sulla velocità. Scopri di più.

Per utilizzare Performance Monitor:

Apri il menu dei comandi.
Inizia a digitare Performance, quindi seleziona Show Performance Monitor.

Figura 1. Lo strumento Monitoraggio delle prestazioni
Fai clic su una metrica per visualizzarla o nasconderla. Nella Figura 1, sono mostrati i grafici Utilizzo CPU, Dimensione heap JS e Listener di eventi JS.

Funzionalità correlate:

Riquadro Rendimento: Segui un percorso dell'utente critico e registra tutto ciò che accade sulla pagina, inclusa 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 delle prestazioni di caricamento e runtime su qualsiasi URL. Scopri di più.

Se hai appena iniziato ad analizzare il rendimento, il percorso consigliato consiste nell'utilizzare prima il riquadro Controlli e poi analizzare ulteriormente il rendimento utilizzando il riquadro Rendimento o il Monitoraggio del rendimento.

Sui siti di grandi dimensioni, la console può essere rapidamente inondata di messaggi non pertinenti. Utilizza la nuova barra laterale della console per ridurre il rumore di fondo e concentrarti sui messaggi importanti.

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 per visualizzarla.

Funzionalità correlate:

Casella di testo Filtro. Inserendo del testo, nella console verranno visualizzati solo i messaggi che lo includono. Supporta anche pattern regex, filtri esclusi e filtri URL.

Raggruppa messaggi della console simili

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

Esempio di raggruppamento di messaggi simili nella console

Figura 3. Esempio di raggruppamento di messaggi simili nella console

Fai clic su un gruppo per espanderlo e visualizzare ciascuna 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:

Puoi raggruppare i tuoi messaggi della console con console.group().

Override locali

Ci dispiace. Inizialmente avevamo programmato il lancio di questa funzionalità in Chrome 64, ma poi l'abbiamo avvicinata alla scadenza per risolvere alcuni problemi. A quanto pare, la UI della sezione Novità non si aggiornava in tempo. Siamo spiacenti.

Questa funzionalità sarà disponibile in Chrome 65, che sarà disponibile circa 6 settimane dopo la versione 64. Per saperne di più, consulta Override locali. Se utilizzi Windows o Mac, puoi provare subito 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 ultime funzionalità di DevTools, di testare le API delle piattaforme web all'avanguardia e di 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 usando 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.