Riferimento per le funzionalità delle prestazioni

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

Consulta Inizia all'analisi delle prestazioni del runtime per un tutorial guidato su come analizzare le prestazioni di una pagina utilizzando Chrome DevTools.

Registra performance

Puoi registrare le prestazioni di runtime o caricamento.

Registra le prestazioni del runtime

Registra le prestazioni di runtime quando vuoi analizzare le prestazioni di una pagina mentre è in esecuzione, anziché caricare.

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

3. Fai clic su Registra .

   

4. Interagire con la pagina. DevTools registra tutte le attività sulle pagine generate dalle tue interazioni.

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

Prestazioni di caricamento dei record

Registra le prestazioni di caricamento quando vuoi analizzare le prestazioni di una pagina durante il caricamento, rispetto all'esecuzione.

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

3. Fai clic su Inizia profilazione e ricarica la pagina . DevTools passa prima a about:blank per cancellare gli screenshot e le tracce rimanenti. DevTools registra le metriche sulle prestazioni 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.

Acquisire screenshot durante la registrazione

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

Per informazioni su come interagire con gli screenshot, leggi l'articolo Visualizzare uno screenshot.

Forza la garbage collection durante la registrazione

Mentre registri una pagina, fai clic su Raccogli i dati della garbage mop per forzare la garbage collection.

Mostra impostazioni di registrazione

Fai clic su Acquisisci impostazioni per mostrare più impostazioni relative al modo in cui DevTools acquisisce le registrazioni delle prestazioni.

Disattiva gli esempi JavaScript

Per impostazione predefinita, la traccia principale di una registrazione visualizza stack di chiamata dettagliati delle funzioni JavaScript chiamate durante la registrazione. Per disattivare questi stack di chiamate:

1. Apri il menu Impostazioni acquisizione . Vedi Mostrare impostazioni di registrazione.
2. Attiva la casella di controllo Disattiva esempi di JavaScript.
3. Acquisisci una registrazione della pagina.

Gli screenshot seguenti mostrano la differenza tra la disattivazione e l'attivazione di esempi JavaScript. La traccia principale della registrazione è molto più breve quando il campionamento è disattivato, in quanto vengono omessi tutti gli stack di chiamate JavaScript.

Questo esempio mostra una registrazione con esempi JS disattivati.

Questo esempio mostra una registrazione con esempi di JS attivati.

Limitare la rete durante la registrazione

Per limitare la rete durante la registrazione:

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

Limita la CPU durante la registrazione

Per limitare la CPU durante la registrazione:

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

La limitazione dipende dalle funzionalità del computer. Ad esempio, l'opzione Rallenta 2 volte fa funzionare la CPU 2 volte più lentamente del solito. DevTools non è in grado di simulare realmente le CPU dei dispositivi mobili, poiché l'architettura di questi ultimi è molto diversa da quella dei computer desktop e dei laptop.

Abilita strumentazione di colorazione avanzata

Per visualizzare la strumentazione di colorazione dettagliata:

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

Per informazioni su come interagire con le informazioni di colorazione, consulta gli articoli Visualizza livelli e Visualizza profilo profilo.

Emula 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 della loro applicazione, ad esempio per controllare le dimensioni del pool pthread di Emscripten.

Per emulare la contemporaneità hardware:

1. Apri il menu Impostazioni acquisizione . Vedi Mostrare 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 è attiva l'emulazione della contemporaneità dell'hardware.

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 cancellare la registrazione dal riquadro Prestazioni.

Analizzare una registrazione di un'esibizione

Dopo aver registrato le prestazioni di runtime o le prestazioni del carico, il riquadro Prestazioni fornisce molti dati per analizzare le prestazioni di ciò che è appena accaduto.

Navigare nella registrazione

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

Seleziona una parte della registrazione

Nella barra delle azioni del riquadro Prestazioni 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, poi trascina a sinistra o a destra sulla Panoramica della cronologia.

Per selezionare una parte utilizzando la tastiera:

1. Imposta lo stato attivo sulla traccia principale o su uno dei suoi vicini.
2. Utilizza i tasti W, A, S e D rispettivamente per aumentare, spostare a sinistra, diminuire lo zoom e spostare a destra.

Per selezionare una parte utilizzando un trackpad:

1. Passa il mouse sopra la sezione Panoramica della cronologia o una traccia (Principale e i relativi 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ù breadcrumb nidificati in successione, aumentando i livelli di zoom e quindi di passare al livello scelto.

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 N ms zoom_in. La selezione si espande per riempire la panoramica degli Spostamenti. Viene creata una catena di breadcrumb nella parte superiore della Panoramica della sequenza temporale.
3. Ripeti i due passaggi precedenti per creare un altro breadcrumb nidificato. Puoi continuare a nidificare i breadcrumb a condizione che 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.

Scorrere un lungo grafico a fiamme

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

Cerca nelle attività

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 qualsiasi attività che inizia con E.

Per scorrere le attività corrispondenti alla query:

• Fai clic sui pulsanti expand_less Indietro o expand_less Avanti.
• Premi Maiusc+Invio per selezionare l'opzione precedente o Invio per selezionare quella successiva.

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

Per modificare le impostazioni delle 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.

Visualizza l'attività del thread principale

Utilizza il canale Principale per visualizzare l'attività che si è verificata sul thread principale della pagina.

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

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

Leggi il diagramma a fiamme

Il riquadro Prestazioni 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 Principale. Un evento click ha causato una chiamata funzione anonima. Questa funzione, a sua volta, ha chiamato onEndpointClick_, che ha chiamato 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 di uno script sono di colore azzurro. Le chiamate provenienti da un altro copione 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 giallo più scuro e viola sono coerenti in tutte le registrazioni.

Anche le attività lunghe sono evidenziate con un triangolo rosso e con la parte di oltre 50 millisecondi ombreggiata 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 diagramma a fiamme dettagliato delle chiamate JavaScript, consulta Disattivare esempi di JavaScript. Quando gli esempi di codice JS sono disabilitati, vedi solo gli eventi di alto livello come Event (click) e Function Call.

Monitora gli autori degli eventi

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

• Annullamento convalida stile o layout -> Ricalcola stili o Layout
• Richiedi frame dell'animazione -> Frame dell'animazione attivato
• Richiedi callback di inattività -> Attiva callback per inattività
• Installa timer -> Timer attivato
• Crea WebSocket -> Invia... e Ricevi l'handshake di WebSocket o Elimina WebSocket

Per vedere le frecce, trovane una nel grafico a fiamme e fai clic su questa.

Visualizzare le attività in una tabella

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

• Quando vuoi visualizzare le attività principali che causano il maggior lavoro, utilizza la scheda Struttura ad albero delle chiamate.
• Quando vuoi visualizzare le attività in cui è stato trascorso direttamente la maggior parte del tempo, utilizza 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 sono dotate di pulsanti per i filtri avanzati accanto alla barra Filtro:

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

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

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

Attività principali

Di seguito è riportata una spiegazione del concetto delle attività principali menzionato nelle schede Albero chiamate, Dal basso verso l'alto e Log eventi.

Le attività root sono quelle che causano l'esecuzione del lavoro da parte del browser. Ad esempio, quando fai clic su una pagina, il browser attiva un'attività Event come attività principale. Quel Event potrebbe quindi causare l'esecuzione di un gestore.

Nel diagramma a fiamme della traccia Principale, le attività principali si trovano in cima al grafico. Nelle schede Call Tree e Log eventi, le attività principali sono gli elementi di primo livello.

Consulta la scheda Struttura delle chiamate per un esempio delle attività principali.

Scheda Struttura chiamate

Utilizza la scheda Struttura ad albero delle chiamate per visualizzare le attività principali che causano il lavoro maggiore.

La scheda Struttura ad albero delle chiamate mostra solo le attività durante la parte selezionata della registrazione. Per informazioni su come selezionare le parti, consulta Selezionare una parte di una registrazione.

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

Il tempo autonomo rappresenta il tempo diretto trascorso in quell'attività. Tempo totale rappresenta il tempo speso nell'attività o nelle attività secondarie.

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

Utilizza la casella Filtro per filtrare gli eventi per 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 stack più pesante per visualizzare un'altra tabella a destra della tabella Attività. Fai clic su un'attività per completare la tabella Stack più pesante. La tabella Stack più pesante mostra gli elementi secondari dell'attività selezionata che hanno richiesto più tempo per l'esecuzione.

Scheda Dal basso verso l'alto

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

La scheda Dal basso verso l'alto mostra solo le attività durante la parte selezionata della registrazione. Per informazioni su come selezionare le parti, consulta Selezionare una parte di una registrazione.

Nel grafico a fiamme della traccia Principale di questo esempio, puoi vedere che è stato dedicato quasi tutto il tempo all'esecuzione delle tre chiamate a wait(). Di conseguenza, l'attività principale nella scheda Dal basso verso l'alto è wait. Nel diagramma a fiamma, il giallo sotto le chiamate a wait corrispondono in realtà a migliaia di chiamate Minor GC. Di conseguenza, puoi notare che nella scheda Dal basso verso l'alto, la seconda attività più costosa è Minor GC.

La colonna Tempo autonomo rappresenta il tempo aggregato trascorso direttamente nell'attività in questione, in tutte le sue occorrenze.

La colonna Tempo totale rappresenta il tempo aggregato trascorso nell'attività in questione o nelle relative attività secondarie.

La 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. Per informazioni su come selezionare le parti, consulta Selezionare una parte di una registrazione.

La colonna Ora di inizio rappresenta il punto in cui è iniziata l'attività rispetto all'inizio della registrazione. L'ora di inizio di 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 trascorso direttamente in quell'attività.

Le colonne Tempo totale rappresentano il tempo trascorso direttamente nell'attività in questione o nei relativi elementi secondari.

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à in base al 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, Scripting, Rendering o Pittura per filtrare tutte le attività di quelle categorie.

Visualizza le sincronizzazioni

Nel canale Tempi, visualizza indicatori importanti come:

• Prima visualizzazione (FP)
• First Contentful Paint (FCP)
• LCP (Largest Contentful Paint)
• Evento DOMContentLoaded (DCL)
• Evento di caricamento (L)
• Le tue chiamate performance.mark() personalizzate. Di seguito è mostrato un singolo contrassegno con descrizione comando a 813,44 ms, con l'etichetta Avvio dell'esecuzione di JavaScript.
• Le tue chiamate performance.measure() personalizzate. Di seguito è mostrato un intervallo giallo con l'etichetta Interazione lenta.

Per visualizzare ulteriori dettagli nella scheda Riepilogo, seleziona un indicatore. Per visualizzare il timestamp dell'indicatore, passaci il mouse sopra nella traccia Tempi.

Visualizza interazioni

Visualizza le interazioni degli utenti nel monitoraggio Interazioni per tenere traccia dei potenziali problemi di reattività.

Per visualizzare le interazioni:

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

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

La traccia Interazioni mostra anche gli avvisi Interaction to Next Paint (INP) per le interazioni superiori a 200 millisecondi nella scheda Riepilogo e in una descrizione comando al passaggio del mouse:

La traccia Interazioni contrassegna le interazioni superiori ai 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 Raster.

Analizzare i frame al secondo (f/s)

DevTools offre diversi modi per analizzare i frame al secondo:

• Utilizza la sezione Fotogrammi per visualizzare la durata di un determinato fotogramma.
• Utilizza lo strumento di misurazione f/s per una stima in tempo reale dei f/s durante l'esecuzione della pagina. Consulta l'articolo Visualizzare i frame al secondo in tempo reale con lo strumento di misurazione FPS.

La sezione Frame

La sezione Frame indica esattamente la durata di un determinato frame.

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. Cornice inattiva (bianco). Nessuna modifica.
2. Cornice (verde). Rendering previsto e tempestivo.
3. Cornice presentata parzialmente (giallo con un motivo a linee e trattini ampie sparse). Chrome ha fatto del suo meglio per eseguire in tempo il rendering di almeno alcuni aggiornamenti visivi. Ad esempio, nel caso in cui il lavoro del thread principale del processo di rendering (animazione canvas) sia in ritardo, ma il thread del compositore (scorrimento) è in tempo.
4. Cornice tagliata (rosso con una trama fitta e continua). Chrome non è in grado di visualizzare il frame in un tempo ragionevole.

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

Fai clic su un frame per visualizzare ancora più informazioni sul frame nella scheda Riepilogo. DevTools contorno blu per il frame selezionato.

Visualizza le richieste di rete

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

Le richieste sono codificate per colore come segue:

• HTML: blu
• CSS: viola
• JS: Giallo
• Immagini: verde

Fai clic su una richiesta per visualizzare ulteriori informazioni nella scheda Riepilogo. Nell'esempio precedente, la scheda Riepilogo mostra le informazioni sulla richiesta verde selezionata.

Un quadrato di colore blu più scuro in alto a sinistra in una richiesta indica che si tratta di una richiesta con priorità più alta. Un quadrato di colore blu più chiaro indica una priorità più bassa. Nell'esempio precedente, la richiesta selezionata ha priorità alta, mentre quella blu sopra la richiesta ha la priorità più alta.

La sezione Riepilogo include i campi Priorità iniziale e (finale) Priorità. Se i valori sono diversi, la priorità di recupero della richiesta è cambiata durante la registrazione. Per ulteriori informazioni, vedi Ottimizzazione del caricamento delle risorse con l'API Fetch Priority.

Nell'esempio precedente, la richiesta per www.google.com è rappresentata da una linea a sinistra, una barra al centro con una parte scura e una chiara e una linea a destra. Lo screenshot successivo mostra la rappresentazione corrispondente della stessa richiesta nella scheda Timing del riquadro Network. Ecco come queste due rappresentazioni si mappano tra loro:

• La riga a sinistra include tutto fino al gruppo di eventi Connection Start, inclusi. In altre parole, si tratta di tutto ciò che precede Request Sent, esclusivo.
• La parte chiara della barra è Request Sent e Waiting (TTFB).
• La parte scura della barra è Content Download.
• La riga giusta è essenzialmente il tempo trascorso ad attendere il thread principale. Questo non è rappresentato nella scheda Tempistiche.

Questo esempio mostra la rappresentazione a barre della richiesta www.google.com.

Questo esempio mostra la rappresentazione della scheda Tempi della richiesta www.google.com.

Visualizza metriche di memoria

Attiva la casella di controllo Memoria per visualizzare le metriche relative alla memoria dell'ultima registrazione.

DevTools mostra un nuovo grafico Memoria, sopra la scheda Riepilogo. C'è anche un nuovo grafico sotto il grafico NET, chiamato HEAP. Il grafico HEAP fornisce le stesse informazioni della linea Heap JS 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 quella categoria dal grafico.

Il grafico mostra solo l'area 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 Rete o Principale, a volte hai bisogno di una stima più precisa della durata di determinati eventi. Tieni premuto Maiusc, fai clic e tieni premuto e trascina a sinistra o a destra per selezionare una parte della registrazione. Nella parte inferiore della selezione, DevTools mostra la durata di quella parte.

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

Visualizzare uno screenshot

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

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

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

Questo esempio mostra lo screenshot per il frame 195.5ms nella scheda Riepilogo quando fai clic sul frame nella sezione Frame.

Fai clic sulla miniatura nella scheda Riepilogo per ingrandire lo screenshot.

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

Visualizza informazioni sui livelli

Per visualizzare informazioni sui livelli avanzati di un frame:

1. Abilita la strumentazione di colorazione avanzata.
2. Seleziona un frame nella sezione Frame. DevTools mostra informazioni sui suoi livelli nella nuova scheda Livelli, accanto alla scheda Log eventi.

Passa il mouse sopra un livello per evidenziarlo nel diagramma.

In questo esempio viene mostrato il livello n. 39 evidenziato quando ci 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 Reset Transform per reimpostare la posizione originale del diagramma.

Guarda come funziona l'analisi dei livelli:

Visualizza profiler colorazione

Per visualizzare informazioni avanzate su un evento di colorazione:

1. Abilita la strumentazione di colorazione avanzata.
2. Seleziona un evento Paint nella traccia Principale.

Analizzare le prestazioni del rendering con la scheda Rendering

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

Apri la scheda Rendering.

Visualizza i frame al secondo in tempo reale con lo strumento di misurazione f/s

Le statistiche di rendering del frame sono un overlay che viene visualizzato nell'angolo in alto a destra dell'area visibile. Fornisce una stima in tempo reale degli f/s durante l'esecuzione della pagina.

Vedi Statistiche di rendering dei frame.

Visualizza gli eventi di pittura in tempo reale con Paint Flashing

Utilizza Paint Flashing per avere una visualizzazione in tempo reale di tutti gli eventi di disegno presenti sulla pagina.

Vedi Lampeggiamento di vernice.

Visualizza un overlay di livelli con Bordi dei livelli

Usa Bordi livello per visualizzare un overlay di bordi e riquadri del livello nella parte superiore della pagina.

Vedi Bordi del livello.

Individua i problemi di prestazioni dello scorrimento in tempo reale

Utilizza Problemi di rendimento dello scorrimento per identificare gli elementi della pagina con listener di eventi correlati allo scorrimento che potrebbero danneggiare le prestazioni della pagina. DevTools descrive gli elementi potenzialmente problematici in verde acqua.

Consulta la sezione Problemi di prestazioni dello scorrimento.