Chrome DevTools: profilazione della CPU di 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 in 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 è mappata al flusso di lavoro precedente a cui sei abituato.

Accesso al vecchio profiler CPU JavaScript

Se preferisci il flusso di lavoro "Registra profilo CPU JavaScript" precedente che 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 denominato 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 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 non appena rileva che la pagina è stata caricata completamente.
    • 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, il seguente screenshot 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) a quello 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 flusso di lavoro (a destra).