En Chrome 58, que actualmente es Canary, se cambió el nombre del panel Timeline por Performance, el de Profiles, el de Memory y la función de Record JavaScript CPU Profile se trasladó a una ubicación más oculta.
El objetivo a largo plazo es quitar el Generador de perfiles de CPU de JavaScript anterior y que todos trabajen con el nuevo flujo de trabajo.
En esta breve guía de migración, se muestra cómo registrar un perfil de JS en el panel Rendimiento y cómo se asigna la IU del panel Rendimiento al flujo de trabajo anterior al que estás acostumbrado.
Cómo acceder al Generador de perfiles de CPU de JavaScript anterior
Si prefieres el flujo de trabajo anterior "Record JavaScript CPU Profile" que estaba disponible en el panel Perfiles, puedes acceder a él de la siguiente manera:
- Abre el menú principal de Herramientas para desarrolladores.
- Selecciona Más herramientas > Generador de perfiles de JavaScript. El generador de perfiles anterior se abrirá en un panel nuevo llamado JavaScript Profiler.
Cómo grabar un perfil de JS
- Abra Herramientas para desarrolladores.
Haz clic en la pestaña Rendimiento.
Figura 1: El panel Rendimiento
Graba de una de las siguientes maneras:
- Para generar un perfil de la carga de una página, haz clic en Record Page Load. Herramientas para desarrolladores inicia automáticamente la grabación y, luego, se detiene automáticamente cuando detecta que la página terminó de cargarse.
- Para generar un perfil de una página en ejecución, haz clic en Record, realiza las acciones para las que desees generar perfiles y, luego, haz clic en Stop cuando hayas terminado.
Cómo se asigna el flujo de trabajo anterior al nuevo
En la vista Gráfico del flujo de trabajo anterior, la siguiente captura de pantalla muestra la posición del gráfico de descripción general del uso de CPU (flecha superior) y el gráfico tipo llama (flecha inferior) en el flujo de trabajo nuevo.
Figura 2. Asignación entre el gráfico tipo llama en el flujo de trabajo anterior (izquierda) y el nuevo (derecha)
La vista Heavy (Bottom Up) está disponible en la pestaña Bottom-Up:
Figura 3. Asignación entre la vista Bottom-Up en el flujo de trabajo anterior (izquierda) y en el nuevo (derecha)
Y la vista Tree (Top Down) está disponible en la pestaña Call Tree:
Figura 4. Asignación entre la vista de árbol en el flujo de trabajo anterior (izquierda) y el nuevo (derecha)