Chrome DevTools - Profilazione della CPU JavaScript in Chrome 58

Kayce baschi
Kayce Basques

In Chrome 58, attualmente Canary, il riquadro Cronologia è stato rinominato nel riquadro Prestazioni, il riquadro Profili è stato rinominato nel riquadro Memoria e la funzionalità Registra profilo CPU JavaScript nel riquadro Profili è stata spostata in una posizione più nascosta.

L'obiettivo a lungo termine è rimuovere il vecchio Profiler CPU JavaScript e far lavorare tutti con il nuovo flusso di lavoro.

Questa breve guida alla migrazione mostra come registrare un profilo JS nel riquadro Prestazioni e in che modo l'interfaccia utente del riquadro Prestazioni viene mappata al flusso di lavoro precedente.

Accesso al vecchio profiler CPU JavaScript

Se preferisci il flusso di lavoro "Registra profilo CPU JavaScript" precedente che prima era disponibile nel riquadro Profili, puoi ancora accedervi in questo modo:

  1. Apri il menu principale di DevTools.
  2. Seleziona Altri strumenti > Profilor JavaScript. Il profiler precedente si apre in un nuovo riquadro chiamato JavaScript Profiler.

Come registrare un profilo JS

  1. Apri DevTools.
  2. Fai clic sulla scheda Rendimento.

    Riquadro delle prestazioni di Chrome DevTools.
    Figura 1. Il riquadro Prestazioni.

  3. Registra in uno dei seguenti modi:

    • Per profilare un caricamento pagina, fai clic su Registra caricamento pagina. DevTools avvia automaticamente la registrazione e si interrompe automaticamente quando rileva che il caricamento della pagina è terminato.
    • Per profilare una pagina in esecuzione, fai clic su Registra, esegui le azioni desiderate e, al termine, fai clic su Interrompi.

Come il vecchio flusso di lavoro viene mappato al nuovo

Dalla visualizzazione Grafico del flusso di lavoro precedente, lo screenshot seguente mostra la posizione del grafico di panoramica dell'utilizzo della CPU (freccia in alto) e del grafico a fiamme (freccia in basso) nel nuovo flusso di lavoro.

Mappatura tra il grafico a fiamme nel flusso di lavoro precedente e quello nuovo.
Figura 2. Mappatura tra grafico a fiamme nel flusso di lavoro precedente (a sinistra) e nuovo (a destra).

La visualizzazione Intensa (dal basso verso l'alto) è disponibile nella scheda Dal basso verso l'alto:

Mappatura della visualizzazione dal basso verso l'alto nel flusso di lavoro precedente e del nuovo flusso di lavoro.
Figura 3. Mappatura tra la visualizzazione dal basso in alto nel flusso di lavoro precedente (a sinistra) a quello nuovo (a destra).

Inoltre, la visualizzazione Albero (dall'alto in basso) è disponibile nella scheda Struttura ad albero delle chiamate:

Mappatura tra la visualizzazione ad albero nel flusso di lavoro precedente e nel nuovo flusso di lavoro.
Figura 4. Mappatura tra la visualizzazione ad albero nel flusso di lavoro precedente (a sinistra) e il nuovo (a destra).

Invia un ping a @ChromeDevTools su Twitter o apri un problema su GitHub nel nostro repository di documenti se abbiamo perso qualche funzionalità o se hai altre domande su questo articolo.