Herramientas para desarrolladores de Chrome: Creación de perfiles de CPU en JavaScript en Chrome 58

Vascos de Kayce
Kayce Vasques

En Chrome 58, que actualmente es Canary, se cambió el nombre del panel Timeline a Performance, el de Profiles se cambió a panel de memoria y la función de Record CPU Profiler de JavaScript en el panel Profiles 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 lograr que todos trabajen con el nuevo flujo de trabajo.

En esta breve guía de migración, se muestra cómo grabar un perfil de JS en el panel de rendimiento y cómo se asigna la IU del panel de 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 Profiles, puedes acceder a él de la siguiente manera:

  1. Abre el menú principal de Herramientas para desarrolladores.
  2. Selecciona Más herramientas > Generador de perfiles de JavaScript. El generador de perfiles anterior se abre en un panel nuevo llamado JavaScript Profiler.

Cómo grabar un perfil de JS

  1. Abra Herramientas para desarrolladores.
  2. Haz clic en la pestaña Rendimiento.

    Panel de rendimiento de las Herramientas para desarrolladores de Chrome.
    Figura 1: El panel Rendimiento

  3. Graba de una de las siguientes maneras:

    • Para generar un perfil de la carga de una página, haz clic en Record Page Load. Las Herramientas para desarrolladores inician automáticamente la grabación y, luego, se detienen automáticamente cuando detectan 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.

Asignación entre el gráfico tipo llama en el flujo de trabajo anterior y el nuevo
Figura 2: Asignación entre el gráfico tipo llama en el flujo de trabajo anterior (izquierda) y en el nuevo (derecha)

La vista Heavy (Bottom Up) está disponible en la pestaña Bottom-Up:

Correspondencia entre la vista Bottom-Up en el flujo de trabajo anterior y el nuevo.
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:

Asignación entre la vista de árbol en el flujo de trabajo anterior y en el nuevo
Figura 4: Asignación entre la vista de árbol en el flujo de trabajo anterior (izquierda) y el nuevo (derecha)

Haz ping a @ChromeDevTools en Twitter o abre un problema de GitHub en nuestro repositorio de documentos si nos omitimos alguna función o si tienes alguna otra pregunta sobre este artículo.