Asignar el código procesado al código fuente original para la depuración

Para ver y trabajar con el código fuente original al depurar JavaScript en DevTools, en lugar de tener que trabajar con la versión compilada y minificada del código devuelto por el servidor web, use mapas de origen.

La asignación de código fuente mantiene el código del lado cliente legible y depurable, incluso después de que el proceso de compilación compile y minififie el código y lo combine en un único archivo. Los mapas de origen asignan el código compilado y minificado a los archivos de código fuente originales. En DevTools, puede leer y depurar el código fuente original conocido, en lugar del código transformado y compilado irreconocible.

Para usar mapas de origen, debe usar una herramienta al compilar el código que puede generar mapas de origen. Hay muchas herramientas disponibles, como:

• Sass o PostCSS, que pueden generar mapas de origen para CSS.
• El compilador de TypeScript , que compila TypeScript en JavaScript y puede generar asignaciones de origen para depurar el código TypeScript original.
• Transpilador de Babel que puede generar mapas de origen css y JavaScript.
• Compile herramientas como Webpack, Rollup, Vite y Parcel, que también pueden generar mapas de origen.

En este artículo se explica cómo habilitar los mapas de origen en DevTools y cómo usarlos para depurar el código. No explica cómo generar mapas de origen en el proceso de compilación. Para más información sobre la publicación de mapas de origen en el servidor de símbolos de Azure Artifacts, consulte Depuración segura del código original mediante la publicación de mapas de origen en el servidor de símbolos de Azure Artifacts.

Mapas de origen en DevTools

Los mapas de origen de las herramientas de compilación hacen que DevTools cargue los archivos originales además de los archivos minificados y reemplace el código minificado por el código original. Por ejemplo:

• En la herramienta Orígenes , puede ver los archivos originales y establecer puntos de interrupción en ellos.
• En la herramienta Rendimiento , puede ver los nombres de las funciones originales en el gráfico de llama.
• En la herramienta Consola , puede ver los nombres de archivo originales y los números de línea en seguimientos de pila.

Mientras tanto, Microsoft Edge ejecuta realmente el código minificado para representar la página web. DevTools solo usa los mapas de origen y solo para mostrar código fuente a los desarrolladores.

DevTools sabe cómo cargar un mapa de origen cuando se encuentra un //# sourceMappingURL= comentario en un archivo compilado. Por ejemplo, el siguiente comentario indica a DevTools que cargue el mapa de origen desde http://example.com/path/to/your/sourcemap.map:

//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map

Habilitación de mapas de origen en DevTools

Los mapas de origen están habilitados de forma predeterminada.

Para asegurarse de que los mapas de origen están habilitados:

1. Para abrir DevTools, en Microsoft Edge, haga clic con el botón derecho en una página web y, a continuación, seleccione Inspeccionar. O bien, presione Ctrl+Mayús+I (Windows, Linux) o Comando+Opción+I (macOS).

2. En DevTools, haga clic en Personalizar y controlar DevTools () >Configuración () >Preferencias.

3. En la página Preferencias , en la sección Orígenes , asegúrese de que la casilla Habilitar mapas de origen de JavaScript y la casilla Habilitar mapas de origen CSS están activadas:

   

4. En la esquina superior derecha de Configuración, haga clic en el botón Cerrar ().

Habilitación de la carga de mapas de origen desde rutas de acceso de archivo remotas

De forma predeterminada, DevTools no carga mapas de origen cuando la dirección URL del mapa de origen es una ruta de acceso de archivo remota, como cuando la dirección URL del mapa de origen comienza con file:// y tiene como destino un archivo que no está en el dispositivo actual.

Para habilitar la carga de mapas de origen desde rutas de acceso de archivo:

1. En DevTools, haga clic en Personalizar y controlar DevTools () >Configuración () >Preferencias.

2. En la página Preferencias , en la sección Orígenes , active la casilla Permitir a DevTools cargar recursos, como mapas de origen, desde rutas de acceso de archivo remotas. Deshabilitado de forma predeterminada por motivos de seguridad.

Depuración con mapas de origen

Al depurar el código y cuando se habilitan los mapas de origen, los mapas de origen se usan en varios lugares:

• En la herramienta Consola , los vínculos de los mensajes de registro a los archivos de origen van a los archivos originales, no a los archivos compilados.

• Al recorrer el código paso a paso en la herramienta Orígenes , los archivos originales se muestran en el panel Navegador de la izquierda. Al abrir un archivo original, se muestra su código original y se pueden establecer puntos de interrupción en él. Para obtener más información sobre la depuración con puntos de interrupción en la herramienta Orígenes , vea Pausar código con puntos de interrupción.

• En la herramienta Orígenes , los vínculos a los archivos de origen que aparecen en la pila de llamadas del panel Depurador abren los archivos de origen originales.

• En la herramienta Rendimiento , el gráfico de llama muestra los nombres de función originales, no los nombres de función compilados.

Vea también

• Depuración segura del código original mediante la publicación de mapas de origen en el servidor de símbolos de Azure Artifacts
• Depuración segura del código original mediante mapas de origen del servidor de símbolos de Azure Artifacts
• Herramienta De supervisión de mapas de origen

Esta obra está licenciada bajo una Licencia Internacional Creative Commons Attribution 4.0.