Haz que tu código del cliente sea legible y depurable incluso después de combinarlo, reducirlo o compilarlo. Utiliza los mapas de fuentes para asignar tu código fuente al código compilado en el panel Fuentes.
Comienza a usar los preprocesadores
Los mapas de origen de los preprocesadores hacen que Herramientas para desarrolladores cargue los archivos originales además de los reducidos.
Chrome ejecutará el código reducido, pero el panel Sources te mostrará el código que creaste. Puedes establecer puntos de interrupción y revisar el código en los archivos de origen, 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 a medida que lo escribiste, a diferencia del código que entrega tu servidor de desarrollo y lo ejecuta el navegador.
Para usar mapas de fuentes en el panel Fuentes, sigue estos pasos:
- Usa solo los preprocesadores que pueden producir mapas de origen.
- Verifica que tu servidor web pueda entregar mapas de origen.
Usa un preprocesador compatible
Entre los preprocesadores comunes que se utilizan en combinación con los mapas de origen, se incluyen los siguientes:
- Transpiladores: Babel
- Compiladores: TypeScript y Dart
- Minificadores: terser
- Agrupadores y servidores de desarrollo: Webpack, Vite, esbuild y Parcel
Para obtener una lista extendida, consulta Mapas de fuentes: idiomas, herramientas y otra información.
Habilitar los mapas de fuentes en Configuración
En 
Configuración > Preferencias > Fuentes, asegúrate de marcar 
Habilitar mapas de fuentes de JavaScript.
Comprueba si los mapas de origen se cargaron correctamente
Consulta Recursos para desarrolladores: Visualiza y carga mapas de fuentes de forma manual.
Realiza depuraciones con mapas de orígenes
Con los mapas de fuentes 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 implementados y creados en el árbol de archivos. Luego, expande la sección
Authored y abre el archivo fuente original en el Editor.
Establece un punto de interrupción como lo harías normalmente. Por ejemplo, un logpoint. Luego, ejecuta el código.
Observa que el Editor coloca un vínculo al archivo implementado en la barra de estado en la parte inferior. Del mismo modo, lo hace para los archivos CSS implementados.
Abre el panel lateral Console. En este ejemplo, junto al mensaje del punto de registro, Console muestra un vínculo al archivo original, no al implementado.
Cambia el tipo de punto de interrupción a normal y vuelve a ejecutar el código. Esta vez, se pausará la ejecución.
Observa que el panel Call Stack muestra el nombre del archivo original y no el implementado.
En la barra de estado, en la parte inferior del Editor, haz clic en el vínculo al archivo implementado. El panel Fuentes te llevará al archivo correspondiente.
Cuando abres cualquier archivo implementado, Herramientas para desarrolladores te notifica si encontró el comentario //# sourceMappingURL y el archivo original asociado.
Ten en cuenta que el Editor imprimió automáticamente el archivo implementado. En realidad, contiene todo el código en una sola línea, excepto el comentario //# sourceMappingURL.
Asigna un nombre a eval() llamadas con #sourceURL
#sourceURL te permite simplificar la depuración cuando trabajas con llamadas eval(). Este asistente es muy similar a la propiedad //# sourceMappingURL. Para obtener más información, consulta la especificación del mapa de origen V3.
El comentario //# sourceURL=/path/to/source.file le indica al navegador que busque el archivo fuente cuando uses eval(). Esto te ayuda a asignar nombres a tus evaluaciones, así como secuencias de comandos y estilos intercalados.
Pruébalo en esta página de demostración:
- Abre las Herramientas para desarrolladores y ve al panel Fuentes.
- 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 Compile. Aparecerá una alerta con la suma evaluada de CoffeeScript.
- En el árbol de archivos del panel Page, 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.
