Chrome DevTools: profilazione della CPU di JavaScript in Chrome 58

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

L'obiettivo a lungo termine è rimuovere il vecchio Profiler di CPU JavaScript e fare in modo che tutti utilizzino il nuovo flusso di lavoro.

Questa piccola guida alla migrazione mostra come registrare un profilo JS nel riquadro Prestazioni e come la UI del riquadro Prestazioni viene mappata al vecchio flusso di lavoro 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 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 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 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 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 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 verso l'alto nel flusso di lavoro precedente (sinistra) e quello nuovo (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 quello nuovo (a destra).