Mantén tu código del cliente legible y depurable incluso después de combinarlo, comprimirlo o compilarlo que la modifica. Usa mapas de fuentes para asignar el código fuente al código compilado en el panel Fuentes.
Comienza a usar preprocesadores
Los mapas de orígenes 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 Fuentes te mostrará el código que hayas creado. Puedes establecer puntos de interrupción y revisar el código paso a paso en 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 a medida que lo escribiste, a diferencia del código que entrega tu servidor de desarrollo y ejecuta el navegador.
Para usar mapas de orígenes 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
- Minificadores: terser
- Agrupadores y servidores de desarrollo: Webpack, Vite, esbuild y Parcel
Para obtener una lista más detallada, 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 verificar los 
mapas de fuentes 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.
Cómo realizar 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 creados e implementados en el árbol de archivos. Luego, expande la sección
Autor y abre el 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 en la parte inferior. Del mismo modo, lo hace para los archivos CSS implementados.
Abre el panel lateral Consola. 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, se pausará la ejecución.
Observa que en el panel Pila de llamadas, se muestra el nombre del archivo original y no del implementado.
En la barra de estado, en la parte inferior del Editor, haz clic en el vínculo al archivo implementado. El panel Sources te lleva al archivo correspondiente.
Cuando abras un archivo implementado, las Herramientas para desarrolladores te notificará si encontró el comentario //# sourceMappingURL y el archivo original asociado.
Observa 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 las llamadas de eval() con #sourceURL
#sourceURL te permite simplificar la depuración
cuando trabajas con llamadas a eval(). Este asistente es muy similar a la propiedad //# sourceMappingURL. Para obtener más información, consulta la especificación de 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 nombrar tus evaluaciones, así como a secuencias de comandos y estilos intercalados.
Pruébala en esta página de demostración:
- Abre Herramientas para desarrolladores y ve al panel Fuentes.
- En la página, ingresa un nombre de archivo arbitrario en el campo de entrada Name your code:.
- Haz clic en el botón Compilar. 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 que aparece en la barra de estado del Editor.
