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

Jecelyn Yeen

Nancy Li

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 un perfil del rendimiento de la CPU de Node.js.

¿Por qué el generador de perfiles de JavaScript dejará de estar disponible? (Generador de perfiles de JS)

A partir de Chrome 58, el equipo de Herramientas para desarrolladores planeó dar de baja el Generador de perfiles de JS. Existen varios motivos:

• Ya no se desarrolla activamente. El Generador de perfiles de JS no ha recibido actualizaciones importantes en 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, debido a su capacidad para 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 mejorándola con nuevas funciones y mejoras, convirtiéndola en una herramienta más poderosa y fácil de usar para el análisis del rendimiento.

¿Qué se debe hacer después de la baja?

Si quieres obtener más información para generar perfiles del rendimiento de CPU de JavaScript, consulta Cómo generar perfiles del rendimiento de Node.js.

A continuación, se incluyen algunas sugerencias para usar el panel Rendimiento:

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

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

¿Cómo manejamos la baja?

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

Además de eso, nos comunicamos de forma activa con expertos en desarrollo para probar el prototipo y resolver cualquier inquietud o problema para garantizar que el panel Performance satisfaga las necesidades principales de generación de perfiles.

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

Problemas clave y cómo los solucionamos

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

• Se admite el formato de archivo .cpuprofile. El Generador de perfiles de JS usa un formato de archivo diferente. El panel Rendimiento debería admitir esta función.
• Velocidad de carga lenta. La velocidad de carga del panel parecía lenta, lo que interfiere 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.

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

Velocidad de carga lenta

Según los desarrolladores, el panel Rendimiento tardó demasiado en cargar archivos de datos de gran tamaño y, en ocasiones, incluso fallaba.

Utilizamos Herramientas para desarrolladores para analizar Herramientas (la llamamos "DevTools-on-DevTools"). Detectamos problemas y realizamos varias optimizaciones:

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

Al corregir estos cuellos de botella, logramos que la carga de archivos grandes sea un 80% más rápida. 🎉

Obtén más información sobre lo que aprendimos en esta entrada de blog: Un panel de rendimiento un 400% más rápido a través de la percepción.

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 el análisis de una instancia de VM específica.

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

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, JS Profiler 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 en Performance para que se cargue correctamente.

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

Una vez identificado el tipo de contenido, lo procesamos según corresponda. Para un archivo de registro, analizamos los eventos y compilamos 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 de Node.js y Deno.

Si tienes comentarios o sugerencias, agrégalos a este error o comunícate mediante una de las siguientes opciones.

Descarga los canales de vista previa

Considera usar Canary, Dev o Beta de Chrome como tu navegador de desarrollo predeterminado. Estos canales de vista previa te brindan acceso a las funciones más recientes de Herramientas para desarrolladores, prueba APIs de plataformas web de vanguardia y encuentra problemas en tu sitio antes que tus usuarios.

Cómo comunicarse con el equipo de Herramientas para desarrolladores de Chrome

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

• Envíanos tus sugerencias o comentarios a través de crbug.com.
• Informa un problema en Herramientas para desarrolladores mediante Más opciones     > Ayuda > Informar problemas con Herramientas para desarrolladores en Herramientas para desarrolladores.
• Envía un tweet a @ChromeDevTools.
• Deja comentarios en los videos de YouTube de las Novedades de las Herramientas para desarrolladores o en las sugerencias de Herramientas para desarrolladores (videos de YouTube).