Chrome DevTools - Profilazione della CPU JavaScript in Chrome 58

Kayce Basques

In Chrome 58, attualmente Canary, il riquadro Spostamenti è stato rinominato in 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 di CPU JavaScript e far lavorare tutti con il nuovo flusso di lavoro.

Questa piccola guida alla migrazione mostra come registrare un profilo JS nel riquadro Prestazioni e come l'interfaccia utente del riquadro Prestazioni viene mappata al flusso di lavoro precedente a cui sei abituato.

Accesso al vecchio profiler CPU JavaScript

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

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

Come registrare un profilo JS

  1. Apri DevTools.

  2. Fai clic sulla scheda Rendimento.

    Il riquadro delle prestazioni di Chrome DevTools.
    Figura 1. Il riquadro Rendimento.

  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 la pagina è stata caricata.
    • Per profilare una pagina in esecuzione, fai clic su Registra, esegui le azioni che desideri profilare, quindi fai clic su Interrompi al termine.

In che modo il vecchio flusso di lavoro viene mappato al nuovo

Nella visualizzazione Grafico del flusso di lavoro precedente, lo screenshot riportato di seguito 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 grafico a fiamme nel flusso di lavoro precedente e in quello nuovo.
Figura 2. Mappatura tra grafico a fiamme nel flusso di lavoro precedente (sinistra) e nuovo flusso di lavoro (destra).

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

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

La visualizzazione Albero (dall'alto verso il basso) è disponibile nella scheda Struttura ad albero delle chiamate:

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

Invia un ping a @ChromeDevTools su Twitter o apri un problema su GitHub nel nostro repository della documentazione se ci sono sfuggite funzionalità o se hai altre domande su questo articolo.