Utilizar um "source map"

This translation is incomplete. Please help translate this article from English

As fontes de JavaScript executadas pelo navegador são geralmente transformadas de alguma forma a partir das fontes originais criadas por um programador. Por exemplo:

  • sources são geralmente combinadas e reduzidas para tornar mais eficiente a entrega das mesmas a partir do servidor.
  • O JavaScript em execução numa página é geralmente gerado por máquina, como quando compilado a partir de um idioma como CoffeeScript ou TypeScript.

In these situations, it's much easier to debug the original source, rather than the source in the transformed state that the browser has downloaded. A source map is a file that maps from the transformed source to the original source, enabling the browser to reconstruct the original source and present the reconstructed original in the debugger.

To enable the debugger to work with a source map, you must:

  • generate the source map
  • include a comment in the transformed file, that points to the source map. The comment's syntax is like this:
//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map

In the video above we load https://mdn.github.io/devtools-examples/sourcemaps-in-console/index.html. This page loads a source called "main.js" that was originally written in CoffeeScript and compiled to JavaScript. The compiled source contains a comment like this, that points to a source map:

//# sourceMappingURL=main.js.map

In the Debugger's source list pane, the original CoffeeScript source now appears as "main.coffee", and we can debug it just like any other source.