Mostrar nombres de función originales en perfiles de rendimiento

Si el proceso de compilación compila y minifigura el código y lo combina en un único archivo, es posible que los nombres de las funciones que se muestran en un perfil de rendimiento sean difíciles de entender. Los mapas de origen asignan el código compilado y minificado a los archivos de código fuente originales. La herramienta Rendimiento puede usar mapas de origen para asignar nombres de función minificados después de realizar una grabación, de vuelta a sus nombres originales que se encuentran en el código original.

Para obtener más información sobre cómo DevTools usa mapas de origen, consulte Asignación del código procesado al código fuente original para la depuración.

Para ver los nombres de las funciones originales en el gráfico de llama en la herramienta Rendimiento , use el botón Unminify ().

La asignación de origen se usa en DevTools para mantener el código del lado cliente legible y depurable. Al hacer clic en el botón Unminify de la herramienta Rendimiento, puede usar mapas de origen para crear una versión sin determinar del perfil de rendimiento que registró.

Ejemplo de un gráfico de llama de perfil de rendimiento, con nombres de función difíciles de leer:

Ejemplo de un gráfico de llama de perfil de rendimiento, con algunos nombres de función más significativos restaurados:

Al grabar un perfil de rendimiento en la herramienta Rendimiento , la sección Principal del perfil muestra gráficos detallados de llama de las funciones de JavaScript a las que se llamó durante la grabación.

Idealmente, en esta vista de gráfico de llama, quiere ver los nombres de función significativos que se muestran en el código fuente original. Sin embargo, si el código de producción está compilado, minificado o agrupado, la herramienta Rendimiento muestra inicialmente los nombres de función que se extraen del código de producción transformado. Estos nombres de función de producción pueden ser oscuros y es posible que no se asignen fácilmente a los nombres de función en el código fuente original.

Para desminificar un perfil de rendimiento, de modo que se muestren algunos nombres de función más significativos además de los identificadores minificados, siga los pasos que se indican a continuación.

Paso 1: Configuración de mapas de origen

Hospede los mapas de origen en paralelo con el código de producción. Al unminificar, la herramienta Rendimiento espera encontrar los mapas de origen junto con el código de producción.

Para obtener más información, consulte Asignación del código procesado al código fuente original para la depuración.

Paso 2: Registro de un perfil de rendimiento

1. En la herramienta Rendimiento , haga clic en el botón Grabar para registrar un perfil de rendimiento de la página que desea analizar. Para obtener más información, vea Record runtime performance in Performance features reference (Registro del rendimiento en tiempo de ejecución en la referencia de características de rendimiento).

   

   Se registra un perfil de rendimiento en la herramienta Rendimiento .

2. En la herramienta Rendimiento , haga clic en el área principal (el gráfico de llamas) y use la rueda del mouse para acercar. Haga clic y arrastre a la izquierda y a la derecha. Examine los nombres de función en el gráfico de llamas.

   El gráfico de llama de la herramienta Rendimiento muestra nombres de función minificados, como XI, Gi, d, o, an, c, co y a del código de producción:

   

Paso 3: Desminificar el código

1. Haga clic en el botón Unminify ():

   

   En DevTools, aparece brevemente un elemento emergente, en el que se lee: Estado: creación de un archivo sin determinar. A continuación, se abre el cuadro de diálogo Guardar como . El nombre de archivo predeterminado es un patrón que comienza con fecha y hora como yymmddThhmmss, como: Profile-20220307T164948-unminified.json. El directorio predeterminado es el directorio Descargas .

2. Seleccione un nombre de archivo y un directorio y, a continuación, haga clic en el botón Guardar .

   La herramienta Rendimiento crea una nueva versión del perfil de rendimiento grabado, con algunos nombres de función del gráfico de llama reemplazados por nombres de función más significativos mediante los mapas de origen. Algunos de los nombres de producción minificados pueden seguir apareciendo, ya que los mapas de origen no siempre proporcionan la información necesaria para que la herramienta Rendimiento asigne todos los nombres de función.

Paso 4: Carga del perfil sin especificar

1. En la herramienta Rendimiento , haga clic en el botón Del perfil de carga (el ). O bien, haga clic con el botón derecho en un área en blanco de la herramienta Rendimiento y, a continuación, seleccione Cargar perfil.

   

2. En el cuadro de diálogo Abrir , seleccione el archivo de perfil .json de rendimiento sin determinar que acaba de descargar. Si es necesario, para obtener más información, consulte Load a recording in Performance features reference (Cargar una grabación en la referencia de características de rendimiento) y, a continuación, continúe a continuación.

   Algunos nombres de función ahora no estánminificados. El gráfico de llama sinminificar de la herramienta Rendimiento ahora muestra esas funciones etiquetadas con nombres más significativos tomados de los mapas de origen, como useObserver (d), useQueuedForceUpdateBlock (o), trackDerivedFunction (an), initializeIconColorMap (c), getExtraToolControls (co)e isToggleEnabled (a).

   

Vea también

• Analizar el rendimiento en tiempo de ejecución (tutorial): introducción al análisis del rendimiento del entorno de ejecución en DevTools.
• Referencia de características de rendimiento: referencia para muchas de las características que se ofrecen en la herramienta Rendimiento.