Uso de un mapa fuente

Los fuentes JavaScript ejecutados por el explorador frecuentemente son transformados de alguna manera desde el original creado por el desarrollador. Por ejemplo:

  • los fuentes a menudo se combinan y minifican para hacer la transferencia desde el servidor más eficiente.
  • el código JavaScript que se ejecuta en una página a menudo es generado automáticamente. Como el compilado desde los lenguajes CoffeeScript o TypeScript.

En estas situaciones, es mucho más fácil depurar el código fuente en el estado original, que el fuente en el estado transformado que el navegador ha descargado. Un mapa fuente es un fichero que mapea el código transformado hacia el estado original, permitiendo al navegador reconstruir el fuente original y presentar el código original en el debugger.

Para habilitar al debugger trabajar con un mapa fuente, debes:

  • generar el mapa fuente
  • incluir un comentario en el fichero transformado, apuntando al mapa fuente. La sintaxis del comentario es la siguiente:
//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map

En el video anterior, cargamos https://mdn.github.io/devtools-examples/sourcemaps-in-console/index.html. Esta página carga un fuente llamado "main.js" que fue originalmente escrito en CoffeeScript y compilado a JavaScript. El fuente compilado contiene un comentario como el siguiente, que apunta al mapa fuente:

//# sourceMappingURL=main.js.map

En el panel de fuentes del debugger, el fichero fuente original en CoffeeScript aparece ahora como "main.coffee", y podemos depurarlo como cualquier otro fichero fuente.