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.