Riferimento per le funzionalità delle prestazioni

Kayce Basques

Sofia Emelianova

Questa pagina è un riferimento completo alle funzionalità di Chrome DevTools relative all'analisi delle prestazioni.

Consulta Analisi del rendimento in fase di esecuzione per un tutorial guidato su come analizzare il rendimento di una pagina utilizzando Chrome DevTools.

Registra le prestazioni

Puoi registrare le prestazioni di runtime o caricamento.

Registra prestazioni di runtime

Registra il rendimento del runtime quando vuoi analizzare il rendimento di una pagina mentre è in esecuzione anziché in fase di caricamento.

1. Vai alla pagina da analizzare.
2. Fai clic sulla scheda Rendimento in DevTools.

3. Fai clic su Registra .

   

4. Interagisci con la pagina. DevTools registra tutte le attività sulle pagine che si verificano in seguito alle interazioni.

5. Fai di nuovo clic su Registra o su Interrompi per interrompere la registrazione.

Registra le prestazioni di caricamento

Registra il rendimento del caricamento quando vuoi analizzare il rendimento di una pagina durante il caricamento, anziché in esecuzione.

1. Vai alla pagina da analizzare.
2. Apri il riquadro Rendimento di DevTools.

3. Fai clic su Avvia profilazione e ricarica pagina . DevTools passa prima a about:blank per cancellare eventuali screenshot e tracce rimanenti. In seguito, DevTools registra le metriche sul rendimento mentre la pagina si ricarica e interrompe automaticamente la registrazione un paio di secondi dopo il termine del caricamento.

   

DevTools aumenta automaticamente lo zoom sulla parte della registrazione in cui si è verificata la maggior parte dell'attività.

In questo esempio, il riquadro Rendimento mostra l'attività durante il caricamento di una pagina.

Acquisisci screenshot durante la registrazione

Attiva la casella di controllo Screenshot per acquisire uno screenshot di ogni fotogramma durante la registrazione.

Consulta la sezione Visualizzare uno screenshot per scoprire come interagire con gli screenshot.

Forza la garbage collection durante la registrazione

Mentre registri una pagina, fai clic su Raccogli rifiuti per forzare la garbage collection.

Mostra le impostazioni di registrazione

Fai clic su Impostazioni di acquisizione per visualizzare altre impostazioni relative alla modalità di acquisizione delle registrazioni delle prestazioni da parte di DevTools.

Disattiva i campioni di JavaScript

Per impostazione predefinita, la traccia Principale di una registrazione mostra stack di chiamate dettagliati delle funzioni JavaScript che sono state chiamate durante la registrazione. Per disattivare questi stack di chiamate:

1. Apri il menu Impostazioni di acquisizione . Consulta Mostrare le impostazioni di registrazione.
2. Attiva la casella di controllo Disattiva campioni di JavaScript.
3. Registra la pagina.

I seguenti screenshot mostrano la differenza tra la disattivazione e l'attivazione degli esempi di JavaScript. La traccia Principale della registrazione è molto più breve quando il campionamento è disattivato, perché vengono omessi tutti gli stack di chiamate JavaScript.

Questo esempio mostra una registrazione con campioni JS disabilitati.

Questo esempio mostra una registrazione con campioni JS abilitati.

Limita la rete durante la registrazione

Per limitare la rete durante la registrazione:

1. Apri il menu Impostazioni di acquisizione . Consulta Mostrare le impostazioni di registrazione.
2. Imposta Rete sul livello di limitazione scelto.

Limitare la CPU durante la registrazione

Per limitare la CPU durante la registrazione:

1. Apri il menu Impostazioni di acquisizione . Vedi Mostrare le impostazioni di registrazione.
2. Imposta la CPU sul livello di limitazione scelto.

La limitazione è relativa alle capacità del computer. Ad esempio, l'opzione Raffreddamento 2x rende la CPU 2 volte più lenta del suo solito. DevTools non può simulare realmente le CPU di dispositivi mobili, perché l'architettura di questi dispositivi è molto diversa da quella di computer e laptop.

Attiva le statistiche del selettore CSS

Per visualizzare le statistiche dei selettori di regole CSS durante gli eventi Ricalcola stile a lungo termine:

1. Apri il menu Impostazioni di acquisizione . Consulta Mostrare le impostazioni di registrazione.
2. Seleziona la casella di controllo Attiva le statistiche del selettore CSS.

Per ulteriori dettagli, consulta l'articolo Analizzare le prestazioni del selettore CSS durante il ricalcolo degli eventi di stile.

Attiva la strumentazione di colorazione avanzata

Per visualizzare la misurazione dettagliata della pittura:

1. Apri il menu Impostazioni di acquisizione . Vedi Mostrare le impostazioni di registrazione.
2. Seleziona la casella di controllo Attiva la strumentazione di colorazione avanzata.

Per scoprire come interagire con le informazioni sulla pittura, consulta Visualizzare i livelli e Visualizzare il profiler della pittura.

Emulare la contemporaneità hardware

Per testare le prestazioni dell'applicazione con un numero diverso di core di processori, puoi configurare il valore riportato dalla proprietà navigator.hardwareConcurrency. Alcune applicazioni utilizzano questa proprietà per controllare il grado di parallelismo dell'applicazione, ad esempio per controllare le dimensioni del pool pthread Emscripten.

Per emulare la contemporaneità hardware:

1. Apri il menu Impostazioni di acquisizione . Consulta Mostrare le impostazioni di registrazione.
2. Seleziona Contemporaneità hardware e imposta il numero di core nella casella di immissione.

DevTools mostra un'icona di avviso accanto alla scheda Prestazioni per ricordarti che l'emulazione della contemporaneità hardware è abilitata.

Per ripristinare il valore predefinito di 10, fai clic sul pulsante Ripristina .

Salvare una registrazione

Per salvare una registrazione, fai clic con il tasto destro del mouse e seleziona Salva profilo.

Caricare una registrazione

Per caricare una registrazione, fai clic con il tasto destro del mouse e seleziona Carica profilo.

Cancellare la registrazione precedente

Dopo aver effettuato una registrazione, premi Cancella registrazione per cancellarla dal riquadro Rendimento.

Analizzare una registrazione del rendimento

Dopo aver registrato il rendimento in fase di esecuzione o registrato il rendimento in fase di caricamento, il riquadro Rendimento fornisce molti dati per analizzare il rendimento di ciò che è appena accaduto.

Navigare nella registrazione

Per esaminare attentamente la registrazione del rendimento, puoi selezionare una parte di una registrazione, scorrere un grafico a forma di fiamma lungo, aumentare e diminuire lo zoom e utilizzare i breadcrumb per passare da un livello di zoom all'altro.

Seleziona una parte della registrazione

Sotto la barra delle azioni del riquadro Rendimento e nella parte superiore della registrazione, puoi vedere la sezione Panoramica della sequenza temporale con i grafici CPU e NET.

Per selezionare una parte di una registrazione, fai clic e tieni premuto, quindi trascina verso sinistra o verso destra nella Panoramica della cronologia.

Per selezionare una parte utilizzando la tastiera:

1. Metti in primo piano la traccia Principale o una delle sue adiacenti.
2. Utilizza i tasti W, A, S, D per aumentare lo zoom, spostarti verso sinistra, diminuire lo zoom e spostarti verso destra, rispettivamente.

Per selezionare una parte utilizzando un trackpad:

1. Passa il mouse sopra la sezione Panoramica della sequenza temporale o uno dei canali (Principale e relativi canali vicini).
2. Con due dita, scorri verso l'alto per diminuire lo zoom, scorri verso sinistra per spostarti a sinistra, scorri verso il basso per aumentare lo zoom e scorri verso destra per spostarti a destra.

Crea breadcrumb e passa da un livello di zoom all'altro

La Panoramica della sequenza temporale ti consente di creare più elementi di breadcrumb nidificati in successione, aumentare i livelli di zoom e passare liberamente da un livello all'altro.

Per creare e utilizzare i breadcrumb:

1. In Panoramica della cronologia, seleziona una parte della registrazione.
2. Passa il mouse sopra la selezione e fai clic sul pulsante zoom_in N ms. La selezione si espande fino a riempire la panoramica della sequenza temporale. Nella parte superiore della panoramica della sequenza temporale inizia a essere creata una catena di link breadcrumb.
3. Ripeti i due passaggi precedenti per creare un altro breadcrumb nidificato. Puoi continuare a nidificare i breadcrumb purché l'intervallo di selezione sia superiore a 5 millisecondi.
4. Per passare a un livello di zoom scelto, fai clic sul breadcrumb corrispondente nella catena nella parte superiore della Panoramica della sequenza temporale.

Per rimuovere i breadcrumb secondari di un breadcrumb, fai clic con il tasto destro del mouse sul breadcrumb principale e seleziona Rimuovi breadcrumb secondari.

Scorri un grafico a fiamme lungo

Per scorrere un grafico a fiamme lungo nella traccia Principale o in uno dei grafici vicini, fai clic e tieni premuto, quindi trascina in qualsiasi direzione finché non appare ciò che stai cercando.

Attività di ricerca

Puoi cercare tra le attività nel canale Principale e le richieste nel canale Rete.

Per aprire una casella di ricerca nella parte inferiore del riquadro Rendimento, premi:

• macOS: Comando+F
• Windows, Linux: Ctrl+F

Questo esempio mostra un'espressione regolare nella casella di ricerca in basso che trova tutte le attività che iniziano con E.

Per scorrere le attività corrispondenti alla tua query:

• Fai clic sui pulsanti expand_less Precedente o expand_more Avanti.
• Premi Maiusc+Invio per selezionare la precedente o Invio per selezionare quella successiva.

Il riquadro Rendimento mostra una descrizione comando sopra l'attività selezionata nella casella di ricerca.

Per modificare le impostazioni di query:

• Fai clic su match_case Maiuscole/minuscole per rendere la query sensibile alle maiuscole.
• Fai clic su regular_expression espressione regolare per utilizzare un'espressione regolare nella query.

Per nascondere la casella di ricerca, fai clic su Annulla.

Modificare l'ordine delle tracce e nasconderle

Per riordinare le tracce delle prestazioni, puoi modificare l'ordine delle tracce e nascondere quelle non pertinenti in modalità di configurazione delle tracce.

Per spostare e nascondere le tracce:

1. Per accedere alla modalità di configurazione, fai clic con il tasto destro del mouse sul nome di un canale e seleziona Configura canali.
2. Fai clic su arrow_upward verso l'alto o arrow_downward verso il basso per spostare una traccia verso l'alto o verso il basso. Fai clic su visibility_off per nasconderlo.
3. Al termine, fai clic su Completa la configurazione delle tracce in basso per uscire dalla modalità di configurazione.

Guarda il video per scoprire come funziona questo flusso di lavoro.

Il riquadro Prestazioni salva la configurazione della traccia per le nuove tracce, ma non nelle successive sessioni DevTools.

Visualizzare l'attività del thread principale

Utilizza il canale Principale per visualizzare le attività che si sono verificate nel thread principale della pagina.

Fai clic su un evento per visualizzare ulteriori informazioni nella scheda Riepilogo. Il riquadro Rendimento evidenzia in blu l'evento selezionato.

Questo esempio mostra ulteriori informazioni sull'evento di chiamata di funzione get nella scheda Riepilogo.

Leggere il grafico a fiamme

Il riquadro Rendimento rappresenta l'attività del thread principale in un grafico a fiamme. L'asse x rappresenta la registrazione nel tempo. L'asse y rappresenta lo stack di chiamate. Gli eventi in alto causano gli eventi riportati di seguito.

Questo esempio mostra un grafico a fiamme nella traccia Main. Un evento click ha causato una chiamata di funzione anonima. Questa funzione, a sua volta, chiama onEndpointClick_, che chiama handleClick_ e così via.

Il riquadro Rendimento assegna agli script colori casuali per suddividere il grafico a fiamme e renderlo più leggibile. Nell'esempio precedente, le chiamate di funzione da uno script sono colorate in azzurro. Le chiamate da un altro script sono di colore rosa chiaro. Il giallo più scuro rappresenta l'attività di scripting, mentre l'evento viola rappresenta l'attività di rendering. Questi eventi gialli e viola più scuri sono coerenti in tutte le registrazioni.

Anche le attività lunghe sono evidenziate con un triangolo rosso e la parte superiore a 50 millisecondi è evidenziata in rosso:

In questo esempio, l'attività ha richiesto più di 400 millisecondi, quindi la parte che rappresenta gli ultimi 350 millisecondi è ombreggiata in rosso, mentre i 50 millisecondi iniziali non lo sono.

Inoltre, il canale Principale mostra informazioni sui profili CPU avviati e arrestati con le funzioni della console profile() e profileEnd().

Per nascondere il grafico a forma di fiamma dettagliato delle chiamate JavaScript, consulta Disattivare i campioni di JavaScript. Quando gli esempi JS sono disabilitati, vedi solo gli eventi di alto livello come Event (click) e Function Call.

Monitora le persone che hanno avviato un evento

La traccia Principale può mostrare le frecce che collegano i seguenti iniziatori e gli eventi che hanno causato:

• Mancata convalida di stile o layout -> Ricalcola stili o Layout
• Richiedi frame dell'animazione -> Frame dell'animazione attivato
• Richiedi callback di inattività -> Richiamata in caso di inattività
• Installa timer -> Timer attivato
• Crea WebSocket -> Invia… e Ricevi l'handshake di WebSocket o Elimina WebSocket

Per visualizzare le frecce, individua un iniziatore o l'evento che ha causato nel grafico a forma di fiamma e selezionalo.

Se selezionata, la scheda Riepilogo mostra i link Autore per per gli autori e Avvio da per gli eventi causati. Fai clic sui pulsanti per passare da un evento all'altro.

Nascondere le funzioni e i relativi elementi secondari nel grafico a forma di fiamma

Per riordinare il grafico a fiamme nel thread Principale, puoi nascondere le funzioni selezionate o i relativi elementi secondari:

1. Nella traccia Principale, fai clic con il tasto destro del mouse su una funzione e scegli una delle seguenti opzioni o premi la scorciatoia corrispondente:

   • Nascondi funzione (H)
   • Nascondi elementi secondari (C)
   • Nascondi gli elementi secondari che si ripetono (R)
   • Reimposta elementi secondari (U)
   • Reimposta traccia (T)
   • Aggiungi script all'elenco degli elementi da ignorare (I)

   

   Accanto al nome della funzione con elementi secondari nascosti viene visualizzato un pulsante a discesa arrow_drop_down.

2. Per visualizzare il numero di elementi secondari nascosti, passa il mouse sopra il pulsante a discesa arrow_drop_down.

   

3. Per reimpostare una funzione con elementi secondari nascosti o l'intero grafico a fiamme, seleziona la funzione e premi U o fai clic con il tasto destro del mouse su una funzione e seleziona Reimposta traccia.

Ignorare gli script nel grafico a fiamme

Per aggiungere uno script all'elenco di elementi da ignorare, fai clic con il tasto destro del mouse su uno script nel grafico e seleziona Aggiungi script all'elenco di elementi da ignorare.

Il grafico comprime gli script ignorati, li contrassegna come In elenco di elementi da ignorare e li aggiunge alle regole di Esclusione personalizzata in Impostazioni Impostazioni > Elenco di elementi da ignorare. Gli script ignorati vengono salvati finché non li rimuovi dalla traccia o dalle Regole di esclusione personalizzate.

Visualizza le attività in una tabella

Dopo aver registrato una pagina, non devi fare affidamento solo sul canale Principale per analizzare le attività. DevTools fornisce anche tre visualizzazioni tabulari per l'analisi delle attività. Ogni vista offre una prospettiva diversa delle attività:

• Quando vuoi visualizzare le attività principali che causano la maggior parte del lavoro, utilizza la scheda Struttura ad albero delle chiamate.
• Quando vuoi visualizzare le attività in cui è stato trascorso direttamente il maggior tempo, usa la scheda Dal basso verso l'alto.
• Quando vuoi visualizzare le attività nell'ordine in cui si sono verificate durante la registrazione, utilizza la scheda Log eventi.

Per aiutarti a trovare più rapidamente ciò che stai cercando, tutte e tre le schede dispongono di pulsanti per i filtri avanzati accanto alla barra Filtra:

• match_case Maiuscole/minuscole.
• regular_expression Espressione regolare.
• match_word Trova parola intera.

Ogni visualizzazione tabulare nel riquadro Rendimento mostra i link per attività come le chiamate di funzioni. Per aiutarti a eseguire il debug, DevTools trova le dichiarazioni di funzione corrispondenti nei file di origine. Inoltre, se le mappe di origine appropriate sono presenti e abilitate, DevTools trova automaticamente i file originali.

Fai clic su un link per aprire un file di origine nel riquadro Origini.

Nota: le tre sezioni successive fanno tutte riferimento alla stessa demo. Puoi eseguire la demo autonomamente nella demo delle schede attività e controllarne il codice alla pagina GoogleChrome/devtools-samples/perf/activitytabs.html.

Attività di root

Di seguito è riportata una spiegazione del concetto di attività principali menzionato nelle sezioni Call Tree, Bottom-Up e Log eventi.

Le attività principali sono quelle che richiedono l'intervento del browser. Ad esempio, quando fai clic su una pagina, il browser attiva un'attività Event come attività principale. Questo Event potrebbe quindi causare l'esecuzione di un gestore.

Nel grafico a forma di fiamma del canale Principale, le attività principali si trovano nella parte superiore del grafico. Nelle schede Albero chiamate e Log eventi, le attività principali sono gli elementi di primo livello.

Per un esempio di attività principali, consulta la scheda Struttura ad albero delle chiamate.

Scheda Albero delle chiamate

Utilizza la scheda Albero chiamate per visualizzare le attività principali che richiedono più lavoro.

La scheda Struttura ad albero delle chiamate mostra solo le attività durante la parte selezionata della registrazione. Consulta Selezionare una parte di una registrazione per scoprire come selezionare le parti.

In questo esempio, gli elementi di primo livello nella colonna Attività, come Event, Paint e Composite Layers, sono attività principali. Il nidificazione rappresenta lo stack di chiamate. In questo esempio, Event ha causato Function Call e quindi button.addEventListener, che ha causato b e così via.

Tempo personale indica il tempo trascorso direttamente nell'attività. Il tempo totale rappresenta il tempo trascorso in quell'attività o in una qualsiasi delle relative attività secondarie.

Fai clic su Tempo auto, Tempo totale o Attività per ordinare la tabella in base a quella colonna.

Utilizza la casella Filtro per filtrare gli eventi in base al nome dell'attività.

Per impostazione predefinita, il menu Raggruppamento è impostato su Nessun raggruppamento. Utilizza il menu Raggruppamento per ordinare la tabella delle attività in base a vari criteri.

Fai clic su Mostra lo stack più pesante per visualizzare un'altra tabella a destra della tabella Attività. Fai clic su un'attività per compilare la tabella Stack più pesante. La tabella Stack più pesante mostra i figli dell'attività selezionata per i quali è stato necessario più tempo per l'esecuzione.

La scheda Dal basso verso l'alto

Utilizza la scheda Dal basso verso l'alto per visualizzare le attività che hanno richiesto direttamente più tempo in modo aggregato.

La scheda Dal basso in alto mostra solo le attività durante la parte selezionata della registrazione. Consulta Selezionare una parte di una registrazione per scoprire come selezionare le parti.

Nel grafico a fiamme della traccia principale di questo esempio, puoi vedere che quasi tutto il tempo è stato dedicato all'esecuzione delle tre chiamate a wait(). Di conseguenza, l'attività principale nella scheda Bottom-Up è wait. Nel grafico a forma di fiamma, il giallo sotto le chiamate a wait indica in realtà migliaia di chiamate a Minor GC. Di conseguenza, puoi vedere che nella scheda Bottom-up, la successiva attività più costosa è Minor GC.

La colonna Tempo auto indica il tempo aggregato trascorso direttamente in quell'attività, in tutte le sue occorrenze.

La colonna Tempo totale rappresenta il tempo aggregato trascorso in tale attività o in una delle relative attività secondarie.

Scheda Log eventi

Utilizza la scheda Log eventi per visualizzare le attività nell'ordine in cui si sono verificate durante la registrazione.

La scheda Log eventi mostra solo le attività durante la parte selezionata della registrazione. Consulta Selezionare una parte di una registrazione per scoprire come selezionare le parti.

La colonna Ora di inizio rappresenta il punto in cui è iniziata l'attività rispetto all'inizio della registrazione. L'ora di inizio 1573.0 ms per l'elemento selezionato in questo esempio significa che l'attività è iniziata 1573 ms dopo l'inizio della registrazione.

La colonna Tempo autonomo rappresenta il tempo speso direttamente in tale attività.

Le colonne Tempo totale rappresentano il tempo trascorso direttamente nell'attività o in una delle sue attività secondarie.

Fai clic su Ora di inizio, Tempo autonomo o Tempo totale per ordinare la tabella in base a quella colonna.

Utilizza la casella Filtro per filtrare le attività per nome.

Utilizza il menu Durata per filtrare le attività che hanno richiesto meno di 1 ms o 15 ms. Per impostazione predefinita, il menu Durata è impostato su Tutte, a indicare che vengono mostrate tutte le attività.

Disattiva le caselle di controllo Caricamento, Esecuzione script, Rendering o Pittura per escludere tutte le attività di queste categorie.

Visualizza tempistiche

Nel canale Tempistiche, visualizza indicatori importanti come:

• First Paint (FP)
• First Contentful Paint (FCP)
• Largest Contentful Paint (LCP)
• Evento DOMContentLoaded (DCL)
• Evento onload (L)
• Le tue chiamate performance.mark() personalizzate. Di seguito viene mostrato un singolo contrassegno con una descrizione comando per 813,44 ms, con l'etichetta Starting to run JavaScript.
• Le tue chiamate performance.measure() personalizzate. Di seguito è mostrato un intervallo giallo, denominato Interazione lenta.

Seleziona un indicatore per visualizzare ulteriori dettagli nella scheda Riepilogo, tra cui il timestamp, il tempo totale, il tempo autonomo e l'oggetto detail. Per le chiamate performance.mark() e performance.measure(), la scheda mostra anche le analisi dello stack.

Visualizza interazioni

Visualizza le interazioni degli utenti sulla traccia Interazioni per tenere traccia di potenziali problemi di reattività.

Per visualizzare le interazioni:

1. Apri DevTools, ad esempio in questa pagina dimostrativa.
2. Apri il riquadro Rendimento e avvia una registrazione.
3. Fai clic su un elemento (caffè) e interrompi la registrazione.
4. Trova la traccia Interazioni nella sequenza temporale.

In questo esempio, la traccia Interazioni mostra l'interazione Cursore. Le interazioni hanno baffi che indicano ritardi di input e presentazione durante i limiti del tempo di elaborazione. Passa il mouse sopra l'interazione per visualizzare una descrizione comando con ritardo dell'input, tempo di elaborazione e ritardo nella presentazione.

La traccia Interactions mostra anche gli avvisi Interaction to Next Paint (INP) per le interazioni più lunghe di 200 millisecondi nella scheda Riepilogo e in una descrizione comando al passaggio del mouse:

La traccia Interazioni contrassegna le interazioni di oltre 200 millisecondi con un triangolo rosso nell'angolo in alto a destra.

Visualizza attività GPU

Visualizza l'attività della GPU nella sezione GPU.

Visualizza attività raster

Visualizza l'attività raster nella sezione Pool di thread.

Analizzare i frame al secondo (f/s)

DevTools offre numerosi modi per analizzare i fotogrammi al secondo:

• Utilizza la sezione Frame per visualizzare il tempo impiegato da un determinato frame.
• Usa lo strumento di misurazione f/s per avere una stima in tempo reale degli f/s durante l'esecuzione della pagina. Consulta la pagina Visualizzare i frame al secondo in tempo reale con il misuratore f/s.

La sezione Cornici

La sezione Fotogrammi indica esattamente la durata di un determinato fotogramma.

Passa il mouse sopra un frame per visualizzare una descrizione comando con ulteriori informazioni al riguardo.

Questo esempio mostra una descrizione comando quando passi il mouse sopra un frame.

La sezione Frame può mostrare quattro tipi di frame:

1. Frame inattivo (bianco). Nessuna modifica.
2. Cornice (verde). Rendering previsto e in tempo.
3. Cornice parzialmente presentata (giallo con un motivo a tratteggi larghi e sparsi). Chrome ha fatto del suo meglio per eseguire il rendering di almeno alcuni aggiornamenti visivi in tempo. Ad esempio, nel caso in cui il lavoro del thread principale del processo di rendering (animazione canvas) sia in ritardo, mentre il thread del compositore (scorrimento) è in tempo.
4. Frame interrotto (rosso con un motivo a linee continue fitte). Chrome non riesce a eseguire il rendering del frame in un tempo ragionevole.

Questo esempio mostra una descrizione comando quando passi il mouse sopra un frame presentato parzialmente.

Fai clic su un frame per visualizzare ulteriori informazioni nella scheda Riepilogo. DevTools indica il frame selezionato in blu.

Visualizza richieste di rete

Espandi la sezione Rete per visualizzare una struttura a cascata delle richieste di rete che si sono verificate durante la registrazione delle prestazioni.

Accanto al nome della traccia Rete è presente una legenda con i tipi di richiesta codificati per colore.

Le richieste di blocco del rendering sono contrassegnate da un triangolo rosso nell'angolo in alto a destra.

Passa il mouse sopra una richiesta per visualizzare una descrizione comando con:

• L'URL della richiesta e il tempo totale impiegato per eseguirla.
• Priorità o una modifica della priorità, ad esempio Medium -> High.
• Indica se la richiesta è Render blocking o meno.
• Suddivisione delle tempistiche delle richieste, descritta di seguito.

Quando fai clic su una richiesta, la traccia Rete traccia una freccia da chi l'ha avviata alla richiesta.

Inoltre, il riquadro Rendimento mostra la scheda Riepilogo con ulteriori informazioni sulla richiesta, inclusi, a titolo esemplificativo, i campi Priorità iniziale e Priorità (definitiva). Se i valori sono diversi, la priorità di recupero della richiesta è cambiata durante la registrazione. Per ulteriori informazioni, consulta Ottimizzare il caricamento delle risorse con l'API Fetch Priority.

La scheda Riepilogo mostra anche una suddivisione dei tempi della richiesta.

La richiesta di www.google.com è rappresentata da una linea a sinistra (|–), una barra al centro con una parte scura, una parte chiara e una linea a destra (–|).

Puoi trovare un'altra suddivisione delle tempistiche nella scheda Rete. Fai clic con il tasto destro del mouse sulla richiesta nel canale Rete o sul relativo URL nella scheda Riepilogo e poi su Mostra nel riquadro Rete. DevTools ti reindirizza al riquadro Rete e seleziona la richiesta corrispondente. Apri la scheda Tempi.

Ecco come queste due suddivisioni si mappano tra loro:

• La riga a sinistra (|–) indica tutto fino al gruppo di eventi Connection start, incluso. In altre parole, è tutto ciò che precede Request Sent.
• La parte luminosa della barra è Request sent e Waiting for server response.
• La parte scura della barra è Content download.
• La linea di destra (–|) indica il tempo trascorso in attesa del thread principale. La scheda Rete > Tempi non la mostra.

Visualizza le metriche di memoria

Seleziona la casella di controllo Memoria per visualizzare le metriche di memoria dell'ultima registrazione.

DevTools visualizza un nuovo grafico Memoria sopra la scheda Riepilogo. Sotto il grafico NET è presente anche un nuovo grafico denominato HEAP. Il grafico HEAP fornisce le stesse informazioni della riga JS Heap nel grafico Memoria.

Questo esempio mostra le metriche relative alla memoria sopra la scheda Riepilogo.

Le linee colorate sul grafico corrispondono alle caselle di controllo colorate sopra il grafico. Disattiva una casella di controllo per nascondere la categoria dal grafico.

Il grafico mostra solo la regione della registrazione selezionata. Nell'esempio precedente, il grafico Memoria mostra solo l'utilizzo della memoria per l'inizio della registrazione, fino a circa 1000 ms.

Visualizzare la durata di una parte di una registrazione

Quando analizzi una sezione come Network o Main, a volte hai bisogno di una stima più precisa del tempo impiegato da determinati eventi. Tieni premuto Maiusc, fai clic e tieni premuto, quindi trascina verso sinistra o verso destra per selezionare una parte della registrazione. Nella parte inferiore della selezione, DevTools mostra il tempo impiegato per quella parte.

In questo esempio, il timestamp 488.53ms nella parte inferiore della parte selezionata indica il tempo della parte selezionata.

Visualizzare uno screenshot

Per informazioni su come attivare gli screenshot, consulta la sezione Acquisire screenshot durante la registrazione.

Passa il mouse sopra la Panoramica della sequenza temporale per visualizzare uno screenshot dell'aspetto della pagina durante il momento della registrazione. La panoramica di Spostamenti è la sezione che contiene i grafici CPU, FPS e NET.

Puoi anche visualizzare gli screenshot facendo clic su un frame nella sezione Frame. DevTools mostra una versione ridotta dello screenshot nella scheda Riepilogo.

Questo esempio mostra lo screenshot del frame 195.5ms nella scheda Riepilogo quando fai clic su quest'ultimo nella sezione Frame.

Fai clic sulla miniatura nella scheda Riepilogo per aumentare lo zoom dello screenshot.

Questo esempio mostra uno screenshot ingrandito dopo aver fatto clic sulla relativa miniatura nella scheda Riepilogo.

Visualizza informazioni sui livelli

Per visualizzare le informazioni avanzate sui livelli di un fotogramma:

1. Attiva la strumentazione di colorazione avanzata.
2. Seleziona un frame nella sezione Frame. DevTools visualizza le informazioni sui relativi livelli nella nuova scheda Livelli, accanto alla scheda Log eventi.

Passa il mouse sopra un livello per evidenziarlo nel diagramma.

Questo esempio mostra il livello #39 evidenziato quando passi il mouse sopra.

Per spostare il diagramma:

• Fai clic su Modalità panoramica per spostarti lungo gli assi X e Y.
• Fai clic su Modalità di rotazione per ruotare lungo l'asse Z.
• Fai clic su Reimposta trasformazione per ripristinare la posizione originale del diagramma.

Guarda l'analisi dei livelli in azione:

Visualizza il profiler colorazione

Per visualizzare le informazioni avanzate su un evento di colorazione:

1. Attiva la strumentazione di colorazione avanzata.
2. Seleziona un evento Paint nella traccia Main.

Analizzare il rendimento del rendering con la scheda Rendering

Utilizza le funzionalità della scheda Rendering per visualizzare più facilmente le prestazioni di rendering della tua pagina.

Apri la scheda Rendering.

Visualizzare i frame al secondo in tempo reale con il misuratore FPS

Le Statistiche di rendering del frame sono un overlay che compare nell'angolo in alto a destra dell'area visibile. Fornisce una stima in tempo reale dei FPS durante l'esecuzione della pagina.

Consulta le statistiche di rendering del frame.

Visualizzare gli eventi di pittura in tempo reale con la funzionalità Lampeggia colori

Utilizza l'opzione Paint Flashing per ottenere una visualizzazione in tempo reale di tutti gli eventi di colorazione nella pagina.

Vedi Aree da colorare lampeggianti.

Visualizza un overlay di livelli con Bordi livello

Utilizza Bordi livello per visualizzare un overlay dei bordi e dei riquadri dei livelli nella parte superiore della pagina.

Vedi Bordi livello.

Trovare problemi di prestazioni dello scorrimento in tempo reale

Utilizza Problemi di prestazioni dello scorrimento per identificare gli elementi della pagina che hanno ascoltatori di eventi relativi allo scorrimento che potrebbero influire negativamente sulle prestazioni della pagina. DevTools delinea gli elementi potenzialmente problematici in verde acqua.

Consulta Problemi di prestazioni dello scorrimento.