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

Kayce Basques
Kayce Basques

En Chrome 58, que actualmente es Canary, se cambió el nombre del panel Rutas por el de Rendimiento, se cambió el nombre del panel Perfiles a Memoria y la función Registrar perfil de CPU de JavaScript del panel Perfiles 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 flujo de trabajo nuevo.

En esta pequeña guía de migración, se muestra cómo registrar un perfil de JS en el panel Performance y cómo la IU del panel Performance se asigna 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 solía estar 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 Generador de perfiles de JavaScript.

Cómo registrar un perfil de JS

  1. Abre 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. Realiza la grabación de una de las siguientes maneras:

    • Para generar el perfil de una carga de página, haz clic en Registrar carga de página. Las Herramientas para desarrolladores inician la grabación automáticamente y, luego, se detienen cuando detectan que se terminó de cargar la página.
    • Para generar el perfil de una página en ejecución, haz clic en Record, realiza las acciones para las que deseas generar perfiles y, luego, haz clic en Stop cuando hayas terminado.

Cómo se corresponde el flujo de trabajo anterior con el 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 flujo de trabajo nuevo.
Figura 2: Asignación entre el gráfico tipo llama en el flujo de trabajo anterior (izquierda) y el flujo de trabajo nuevo (derecha).

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

Asignación entre la vista Bottom-Up del flujo de trabajo anterior y el flujo de trabajo nuevo
Figura 3: Asignación entre la vista Bottom-Up del flujo de trabajo anterior (izquierda) y el nuevo flujo de trabajo (derecha).

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 el flujo de trabajo nuevo
Figura 4: Asignación entre la vista de árbol en el flujo de trabajo anterior (izquierda) y el flujo de trabajo 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.