Riferimento per le funzionalità delle prestazioni

Kayce Basques

Sofia Emelianova

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 un delle prestazioni della pagina con Chrome DevTools.

Registra prestazioni

Puoi registrare le prestazioni di runtime o caricamento.

Registra prestazioni di runtime

Registra le prestazioni del runtime quando vuoi analizzare le prestazioni di una pagina mentre è in esecuzione, come anziché al 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 ai tuoi e 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é correre.

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. Poi DevTools registra le metriche sul rendimento mentre la pagina si ricarica e interrompe automaticamente la registrazione un paio di secondi al 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 pulisci per forzare la garbage collection.

Mostra impostazioni di registrazione

Fai clic su Acquisisci impostazioni. per esponi più 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 di JavaScript funzioni 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 La traccia principale della registrazione è molto più breve se il campionamento è disattivato, perché omette tutte le 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 solito. DevTools non è davvero in grado di simulare le CPU dei dispositivi mobili, perché la loro architettura è molto diversa da quella desktop e laptop.

Attiva le statistiche del selettore CSS

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

1. Apri il menu Impostazioni di acquisizione . Vedi 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 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 scoprire come interagire con le informazioni sul dipinto, vedi Visualizza livelli e Visualizza colore profiler.

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 quella registrazione dal riquadro Rendimento.

Analizzare una registrazione del rendimento

Dopo aver registrato le prestazioni del runtime o del caricamento, la colonna 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 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 verso 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.

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 convalida stile o layout -> Ricalcola stili o Layout
• Richiedi frame dell'animazione -> Frame dell'animazione attivato
• Richiedi callback di inattività -> Richiamata incendio 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.

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 (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.

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 persone da ignorare. Gli script ignorati vengono salvati finché non li rimuovi dalla traccia o dalle Regole di esclusione personalizzate.

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 un punto di vista delle attività:

• Se vuoi visualizzare le attività principali che causano la maggior parte del lavoro, utilizza la struttura ad albero delle chiamate .
• Quando vuoi vedere le attività in cui hai trascorso direttamente la maggior parte del tempo, usa Scheda Dal basso verso l'alto.
• Per vedere le attività nell'ordine in cui si sono verificate durante la registrazione, usa 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 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.

Nota:le tre sezioni successive si riferiscono tutte alla stessa demo. Puoi eseguire la demo autonomamente all'indirizzo Demo della scheda Attività e controlla la fonte su GoogleChrome/devtools-samples/perf/activitytabs.html.

Attività di base

Di seguito è riportata una spiegazione del concetto di attività principali citato nella scheda Struttura ad albero delle chiamate. Scheda 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 un pagina, il browser attiva un'attività Event come attività principale. Questo Event potrebbe quindi causare da eseguire.

Nel grafico a fiamme della traccia Principale, le attività principali si trovano nella parte superiore del grafico. Nella chiamata Le schede ad albero 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 Seleziona una parte di una registrazione per scoprire come selezionarne le parti.

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

Il tempo autonomo rappresenta il tempo speso direttamente in tale attività. Il tempo totale rappresenta il il tempo trascorso in tale attività o nei suoi figli.

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 i 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 Tabella Stack più pesante. La tabella Stack più pesante mostra quali elementi secondari dei l'attività ha richiesto più tempo.

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 Seleziona una parte di una registrazione per scoprire come selezionarne le parti.

Nel grafico a fiamme della traccia principale di questo esempio, puoi vedere che quasi tutte le è stato impiegato per eseguire le tre chiamate a wait(). Di conseguenza, l'attività principale nel La scheda Dal basso verso l'alto è wait. Nel grafico a fiamme, il giallo sotto il le chiamate a wait sono in realtà migliaia di chiamate Minor GC. Di conseguenza, puoi vedere che Scheda Dal basso verso l'alto, la prossima attività più costosa è Minor GC.

La colonna Tempo autonomo rappresenta il tempo aggregato trascorso direttamente in tale attività, in tutti delle 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 il registrazione in tempo reale.

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

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 indica 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 qualsiasi delle sue bambini.

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 tutte le attività che hanno richiesto meno di 1 ms o 15 ms. Per impostazione predefinita Il menu Durata è impostato su Tutte, il che significa che vengono mostrate tutte le attività.

Disattiva le caselle di controllo Caricamento, Esecuzione script, Rendering o Pittura per escluderle 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.

Seleziona un indicatore per visualizzare ulteriori dettagli nella scheda Riepilogo, tra cui il timestamp, il tempo totale, l'autotime e l'oggetto detail.

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. Vedi Visualizzare 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 delinea in blu il frame selezionato.

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.
• 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à (finale). 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.

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 pulsante destro del mouse sulla richiesta nel canale Rete o sul relativo URL nella scheda Riepilogo e fai clic su Mostra nel riquadro Rete. DevTools apre il riquadro Rete e seleziona la richiesta corrispondente. Apri la relativa scheda Tempi.

Ecco come queste due suddivisioni si mappano tra loro:

• La riga a sinistra (|–) include tutti i dati fino al gruppo di eventi Connection start inclusi. In altre parole, si tratta di tutto prima di Request Sent.
• La parte chiara della barra è Request sent e Waiting for server response.
• La parte scura della barra è Content download.
• La riga a destra (–|) indica il tempo trascorso ad attendere il thread principale. La Rete > La scheda Tempi non la mostra.

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 qui sotto nel grafico NET, chiamato HEAP. Il grafico HEAP fornisce le stesse informazioni del grafico 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 una casella di controllo per nascondere tale 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 la durata di 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 per quanto tempo quella porzione.

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 al momento dell'evento. registrazione in tempo reale. 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 mostra 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 relative ai suoi livelli nei 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 spostarsi 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.