Adiós JS Profiler, perfilando la CPU con el panel Performance

El panel del Generador de perfiles de JavaScript dejará de estar disponible en Chrome 124. De ahora en adelante, usa el panel Rendimiento para generar perfiles del rendimiento de la CPU de Node.js.

¿Por qué daremos de baja el generador de perfiles de JavaScript? (Generador de perfiles de JS)

A partir de Chrome 58, el equipo de Herramientas para desarrolladores planificó dar de baja el Generador de perfiles de JS con el tiempo. Existen varios motivos por los cuales esto sucede:

  • Ya no se desarrolla de forma activa. El generador de perfiles de JS no ha recibido actualizaciones importantes durante varios años, y el equipo no tiene los recursos para seguir desarrollándolo.
  • Una experiencia de generación de perfiles más optimizada. El panel Performance ya se usa para todo tipo de análisis de rendimiento y, con su capacidad de generar perfiles del rendimiento de CPU de JavaScript en Node.js, tiene sentido consolidar todo en un solo lugar para lograr coherencia y eficiencia.
  • El panel Rendimiento es mejor. Seguimos perfeccionando esta herramienta con nuevas funciones y mejoras, convirtiéndola en una herramienta más eficaz y fácil de usar para el análisis del rendimiento.

¿Qué debes hacer después de la baja?

Para obtener más información sobre cómo generar perfiles del rendimiento de la CPU en JavaScript, consulta Cómo generar perfiles del rendimiento de Node.js.

A continuación, encontrarás algunas sugerencias para usar el panel Rendimiento:

  • Usa el gráfico tipo llama para identificar cuellos de botella en el rendimiento.

El gráfico tipo llama.

  • Usa las pestañas Bottom-up y Call tree para comprender las relaciones entre las funciones.

La pestaña Bottom-up.

La pestaña Árbol de llamadas

¿Cómo manejamos la baja?

Desarrollamos un prototipo y publicamos una solicitud de comentarios (RFC) públicamente en GitHub para solicitar comentarios de los desarrolladores.

Además, nos comunicamos de manera activa con expertos de los desarrolladores para probar el prototipo y abordar cualquier inquietud o problema para asegurarnos de que el panel Rendimiento satisfaga las necesidades básicas de generación de perfiles.

Estamos eliminando gradualmente el generador de perfiles de JS en 4 etapas a fin de que los desarrolladores tengan tiempo suficiente para ajustarlo y adoptarlo.

Problemas clave y cómo los solucionamos

Entre los comentarios que recibimos, las inquietudes más urgentes se centraban en tres cuestiones principales:

  • Compatibilidad con el formato de archivo .cpuprofile. El Generador de perfiles de JS usa un formato de archivo diferente. El panel Rendimiento debería ser compatible.
  • Velocidad de carga lenta. La velocidad de carga del panel parecía lenta, lo que interfirió en el proceso de generación de perfiles.
  • Falta el selector de VM de JavaScript. La ausencia de un selector de instancias de VM de JavaScript limitó las capacidades de generación de perfiles en determinadas situaciones.

Veamos cada uno de estos problemas y cómo los solucionamos.

Velocidad de carga lenta

Los desarrolladores nos comentaron que el panel Rendimiento tardaba demasiado en cargar archivos de datos grandes y, en ocasiones, incluso fallaba.

Usamos Herramientas para desarrolladores para analizar Herramientas para desarrolladores (lo llamamos “DevTools-on-DevTools”). Encontramos problemas y realizamos varias optimizaciones:

  • Se reemplazó Set por estructuras de datos Array.
  • Se quitaron las estructuras de datos Map innecesarias.
  • Se refactorizaron funciones recursivas a iterativas (bucles) para reducir el uso de la pila de memoria.

Al solucionar estos cuellos de botella, aceleramos la carga de archivos grandes en un 80%. 🎉

Obtenga más información sobre lo que aprendimos en esta entrada de blog: Un panel de rendimiento 400% más rápido mediante perf-ception.

El selector de VM de JavaScript faltante

Al prototipo inicial le faltaba el selector de VM de JavaScript. Los desarrolladores lo usan para desglosar y enfocarse en analizar una instancia de VM específica.

Ahora agregamos un selector de VM de JavaScript al panel Performance. Muestra una lista desplegable de todas las instancias de VM de JavaScript disponibles. Cuando seleccionas una instancia, el panel Rendimiento carga el perfil de CPU de esa instancia específica.

La pestaña Árbol de llamadas

Compatibilidad con el formato de archivo cpuprofile

Anteriormente, el panel Performance solo admitía archivos de registro, que son archivos JSON con un array de eventos de seguimiento.

Por otro lado, el Generador de perfiles de JS admite perfiles de CPU, que son archivos con la extensión .cpuprofile que contienen un objeto JSON. Se ven de la siguiente manera:

{
    // The list of profile nodes. First item is the root node.
    nodes: ProfileNode[];
    // Profiling start timestamp in microseconds.
    startTime: number;
    // Profiling end timestamp in microseconds.
    endTime: number;
    // Ids of samples at top nodes.
    samples?: integer[];
    // Time intervals between adjacent samples in microseconds.
    // The first delta is relative to the profile startTime.
    timeDeltas?: integer[];
}

El nuevo flujo de trabajo no debería impedir que los desarrolladores analicen el cpuprofile existente. Por lo tanto, el panel Performance ahora admite archivos de registro y perfiles de CPU. Puedes importar el archivo cpuprofile a Performance, y se cargará correctamente.

En segundo plano, detectamos las diferencias en la estructura de los objetos con una expresión regular. Si el contenido del archivo comienza con {"nodes":[, entonces es un perfil de CPU. De lo contrario, es un archivo de registro.

Una vez identificado el tipo de contenido, lo procesamos según corresponda. En el caso de los archivos de registro, analizamos los eventos y creamos un cronograma. Para un perfil de CPU, analizamos el objeto JSON y creamos un gráfico tipo llama.

Conclusión

Usa el panel Performance para obtener una experiencia de generación de perfiles más optimizada, tanto para sitios web como para la generación de perfiles del rendimiento de la CPU en aplicaciones Node.js y Deno.

Si tienes comentarios o sugerencias, agrega un comentario a este error o comunícate con nosotros mediante una de las siguientes opciones.

Descarga los canales de vista previa

Considera usar Chrome Canary, Dev o Beta como navegadores de desarrollo predeterminados. Estos canales de vista previa te brindan acceso a las funciones más recientes de Herramientas para desarrolladores, prueban API de plataforma web de vanguardia y detectan problemas en tu sitio antes que los usuarios.

Comunicarse con el equipo de Herramientas para desarrolladores de Chrome

Usa las siguientes opciones para hablar sobre las nuevas funciones y los cambios en la publicación, o cualquier otra cosa relacionada con Herramientas para desarrolladores.

  • Para enviarnos sugerencias o comentarios, accede a crbug.com.
  • Informa un problema en Herramientas para desarrolladores con Más opciones   Más > Ayuda > Informa problemas de Herramientas para desarrolladores en Herramientas para desarrolladores.
  • Twittea a @ChromeDevTools.
  • Deja comentarios en nuestros videos de YouTube de Herramientas para desarrolladores o en videos de YouTube de las Sugerencias de las Herramientas para desarrolladores.