Mantén tu código del cliente legible y depurable incluso después de combinarlo, reducirlo o compilarlo. Usa mapas de origen para asignar tu código fuente al código compilado en el panel Sources.
Comienza a usar los preprocesadores
Los mapas de orígenes de los preprocesadores hacen que DevTools cargue tus archivos originales, además de los reducidos.
Chrome ejecutará tu código reducido, pero el panel Sources te mostrará el código que creaste. Puedes establecer puntos de interrupción y recorrer el código en los archivos fuente, y todos los errores, registros y puntos de interrupción se asignarán automáticamente.
Esto te da la apariencia de depurar el código tal como lo escribiste, a diferencia del código que entrega tu servidor de desarrollo y ejecuta el navegador.
Para usar mapas de origen en el panel Fuentes, sigue estos pasos:
- Usa solo los preprocesadores que puedan producir mapas de origen.
- Verifica que tu servidor web pueda entregar mapas de origen.
Usa un preprocesador compatible
Entre los preprocesadores comunes que se usan en combinación con los mapas de origen, se incluyen los siguientes:
- Transpiladores: Babel
- Compiladores: TypeScript y Dart
- Reductores: terser
- Empaquetadores y servidores de desarrollo: Webpack, Vite, esbuild y Parcel
Para obtener una lista extendida, consulta Mapas de origen: Idiomas, herramientas y otra información.
Habilita los mapas de fuentes en Configuración
En 
Configuración > Preferencias > Fuentes, asegúrate de marcar 
Mapas de origen de JavaScript.
Verifica si los mapas de origen se cargaron correctamente
Consulta Recursos para desarrolladores: Cómo ver y cargar mapas de origen de forma manual.
Depuración con mapas de origen
Con los mapas de origen listos y habilitados, puedes hacer lo siguiente:
- Abre las fuentes de tu sitio web en el panel Fuentes.
Para enfocarte solo en el código que creaste, agrupa los archivos creados y, luego, implementados en el árbol de archivos. Luego, expande la sección Autor de
y abre tu archivo fuente original en el Editor.
Establece un punto de interrupción como lo harías normalmente. Por ejemplo, un punto de registro. Luego, ejecuta el código.
Observa que el editor coloca un vínculo al archivo implementado en la barra de estado que se encuentra en la parte inferior. Del mismo modo, lo hace para los archivos CSS implementados.
Abre el panel lateral de Console. En este ejemplo, junto al mensaje del punto de registro, la consola muestra un vínculo al archivo original, no al implementado.
Cambia el tipo de punto de interrupción a uno normal y vuelve a ejecutar el código. Esta vez, la ejecución se pausa.
Observa que el panel Pila de llamadas muestra el nombre del archivo original y no el que se implementó.
En la barra de estado en la parte inferior del Editor, haz clic en el vínculo al archivo implementado. El panel Fuentes te dirige al archivo correspondiente.
Cuando abres cualquier archivo implementado, DevTools te notifica si encontró el comentario //# sourceMappingURL y el archivo original asociado.
Observa que el editor imprime de forma correcta el archivo implementado. En realidad, contiene todo el código en una sola línea, excepto el comentario //# sourceMappingURL.
Asigna nombres a las llamadas de eval() con #sourceURL
#sourceURL te permite simplificar la depuración cuando se trata de llamadas a eval(). Este ayudante es muy similar a la propiedad //# sourceMappingURL. Para obtener más información, consulta la especificación de Source Map V3.
El comentario //# sourceURL=/path/to/source.file le indica al navegador que busque el archivo de origen cuando usas eval(). Esto te ayuda a nombrar tus evaluaciones, así como las secuencias de comandos y los estilos intercalados.
Pruébala en esta página de demostración:
- Abre las herramientas para desarrolladores y ve al panel Sources.
- En la página, ingresa un nombre de archivo arbitrario en el campo de entrada Asigna un nombre a tu código:.
- Haz clic en el botón Compilar. Aparecerá una alerta con la suma evaluada de la fuente de CoffeeScript.
- En el árbol de archivos del panel Página, abre un archivo nuevo con el nombre de archivo personalizado que ingresaste. Contiene el código JavaScript compilado que tiene el comentario
// #sourceURLcon el nombre original del archivo fuente. - Para abrir el archivo fuente, haz clic en el vínculo de la barra de estado del Editor.
