Riferimento per le funzionalità delle prestazioni

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

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

Registra 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. Interagire 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 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 frame 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 impostazioni di registrazione

Fai clic su Impostazioni di acquisizione per visualizzare altre impostazioni relative al modo in cui DevTools acquisisce le registrazioni delle prestazioni.

Disattiva esempi 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 disabilitare questi stack di chiamate:

1. Apri il menu Impostazioni di acquisizione . Vedi Mostrare le impostazioni di registrazione.
2. Seleziona la casella di controllo Disabilita campioni 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 se il campionamento è disattivato, perché omette 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 . Vedi Mostrare le 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 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 è in grado di simulare veramente le CPU dei dispositivi mobili, perché l'architettura dei dispositivi mobili è molto diversa da quella dei computer desktop e dei laptop.

Attiva la strumentazione di colorazione avanzata

Per visualizzare la strumentazione dettagliata di Paint:

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 informazioni su come interagire con le informazioni sul dipinto, consulta Visualizza livelli e Visualizza il profiler di pittura.

Emula 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 . Vedi 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.

Carica una registrazione

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

Cancella la registrazione precedente

Dopo aver effettuato una registrazione, premi Cancella registrazione per cancellare la registrazione dal riquadro Prestazioni.

Analizzare una registrazione del rendimento

Dopo aver registrato le prestazioni del runtime o del caricamento, il riquadro Prestazioni 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 fiamme 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. Imposta lo stato attivo sulla traccia Principale o su eventuali suoi vicini.
2. Utilizza i tasti W, A, S e D per aumentare lo zoom, spostarti a sinistra, a sinistra e a 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 in successione più breadcrumb nidificati, aumentando i livelli di zoom e quindi di passare al livello scelto.

Per creare e utilizzare i breadcrumb:

1. In Panoramica della sequenza temporale, 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. Viene avviata 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 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.

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.

Cerca attività

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

• macOS: Comando+F
• Windows e 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 query:

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

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

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

Modifica l'ordine delle tracce e nascondile

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 Termina configurazione canali 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.

Visualizza l'attività del thread principale

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

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

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

Nascondi le funzioni e i relativi elementi secondari nel grafico a fiamme

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

   

   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.

Ignora 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 Nell'elenco di elementi da ignorare e li aggiunge alle regole di esclusione personalizzata in Impostazioni Impostazioni > Elenco ignorati. Gli script ignorati vengono salvati finché non li rimuovi dalla traccia o dalle Regole di esclusione personalizzate.

Leggi 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 generato una chiamata di funzione anonima. Questa funzione è a sua volta chiamata onEndpointClick_, chiamata 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 di colore 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 di colore giallo e viola più scuro sono coerenti in tutte le registrazioni.

Le attività lunghe sono anche evidenziate con un triangolo rosso e con la parte di oltre 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 fiamme dettagliato delle chiamate JavaScript, consulta la sezione Disattivare gli esempi 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 generato:

• Annullamento dello stile o del 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 Destroy WebSocket.

Per vedere le frecce, trova un iniziatore o l'evento che ha causato nel grafico a fiamme e selezionalo.

Se selezionata, la scheda Riepilogo mostra i link Iniziatore per per gli iniziatori e i link Avviato da per gli eventi che hanno generato. Fai clic sui pulsanti per passare da un evento all'altro.

Visualizzare le attività in una tabella

Dopo aver registrato una pagina, non devi fare affidamento esclusivamente sul monitoraggio 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.
• Se 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 quello che cerchi, tutte e tre le schede dispongono di pulsanti per i filtri avanzati accanto alla barra Filtro:

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

Ogni visualizzazione tabellare nel riquadro Rendimento mostra i link per attività come le chiamate di funzione. Per aiutarti a eseguire il debug, DevTools trova le dichiarazioni delle funzioni corrispondenti nei file di origine. Inoltre, se sono presenti e abilitate 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à di base

Di seguito viene fornita una spiegazione del concetto di attività principali citato nelle sezioni Struttura ad albero delle chiamate, Dal basso verso l'alto e Log eventi.

Le attività principali sono quelle che comportano alcune operazioni da parte 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 fiamme della traccia 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.

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

La scheda Struttura ad albero delle chiamate

Utilizza la scheda Struttura ad albero delle chiamate per visualizzare quali attività principali causano il maggior 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. La 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.

Il tempo autonomo rappresenta il tempo speso direttamente in tale attività. Il tempo totale rappresenta il tempo trascorso in quell'attività o in una qualsiasi delle relative 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 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 completare la tabella Stack più pesante. La tabella Stack più pesante mostra quali attività secondarie dell'attività selezionata hanno richiesto 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 Dal basso verso l'alto è wait. Nel grafico a fiamme, il giallo sotto le chiamate a wait sono in realtà migliaia di chiamate Minor GC. Di conseguenza, puoi vedere che nella scheda Bottom-Up, la successiva attività più costosa è Minor GC.

La colonna Tempo autonomo rappresenta il tempo aggregato trascorso direttamente in tale attività, in tutte le 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 in tale attività o in qualsiasi attività secondaria.

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, Script, Rendering o Pittura per escludere tutte le attività di queste categorie.

Visualizza tempistiche

Nel monitoraggio Tempi, visualizza indicatori importanti quali:

• Prima colorazione (FP)
• First Contentful Paint (FCP)
• LCP (Largest Contentful Paint)
• Evento DOMContentLoaded (DCL)
• Evento di 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.

Per visualizzare maggiori 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 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 Interactions mostra l'interazione Pointer. 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à delle 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 frame al secondo:

• Utilizza la sezione Frame per visualizzare la durata di 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.

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 fotogrammi:

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 tagliato (rosso con una sequenza continua densa). 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 ancora più 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.

Le richieste hanno colori specifici come segue:

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

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

Un quadrato di colore blu più scuro in alto a sinistra di una richiesta indica che si tratta di una richiesta con priorità più elevata. Un quadrato blu più chiaro indica una priorità inferiore. Nell'esempio precedente, la richiesta selezionata ha alta priorità, mentre quella blu sopra è la 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, consulta la sezione Ottimizzare il 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 parte chiara e una linea a destra. Lo screenshot successivo mostra la rappresentazione corrispondente della stessa richiesta nella scheda Tempi del riquadro Rete. Ecco come queste due rappresentazioni mappano tra loro:

• La riga a sinistra contiene tutto ciò fino al gruppo di eventi Connection Start incluso. In altre parole, si tratta di tutto ciò che precede il giorno 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 valore non è rappresentato nella scheda Tempi.

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

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

Visualizza 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. C'è anche un nuovo grafico sotto il grafico NET, chiamato HEAP. Il grafico HEAP fornisce le stesse informazioni della riga JS Heap nel grafico Memoria.

Questo esempio mostra le metriche della memoria sopra la scheda Riepilogo.

Le linee colorate nel grafico corrispondono alle caselle di controllo colorate sopra il grafico. Disattiva la 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 Rete o Principale, a volte è necessaria una stima più precisa del tempo necessario per determinati eventi. Tieni premuto Maiusc, fai clic e tieni premuto, quindi trascina verso sinistra o verso destra per selezionare una parte della registrazione. In fondo alla selezione, DevTools mostra il tempo necessario per la porzione in questione.

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 sezione Panoramica della sequenza temporale contiene i grafici CPU, f/s e NET.

Puoi anche visualizzare gli screenshot facendo clic su un frame nella sezione Frame. DevTools visualizza 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 sullo screenshot.

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

Visualizza informazioni sui livelli

Per visualizzare le informazioni dei livelli avanzati su un frame:

1. Attiva la strumentazione di colorazione avanzata.
2. Seleziona un frame nella sezione Cornici. 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.

In questo esempio, il livello #39 viene 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 Profiler di 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 le prestazioni 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.

Visualizza i frame al secondo in tempo reale con il misuratore f/s

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.

Vedi Statistiche sul rendering del frame.

Visualizza gli eventi di pittura in tempo reale con Paint Flashing

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

Vedi Lampeggiamento della vernice.

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.

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 influire negativamente sulle prestazioni della pagina. DevTools delinea gli elementi potenzialmente problematici in verde acqua.

Consulta Problemi di prestazioni dello scorrimento.