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.

Nessas situações, é muito mais fácil debugar o fonte original do que o fonte no estado transformado que o navegador obteve. Um source map é um arquivo que mapea da fonte transformada para a original, permitindo ao navegador reconstruir a fonte original e disponibilizá-la no debugger.

Para que o navegador trabalhe com um source map, você deve:

  • gerar o source map
  • incluir um comentário no arquivo transformado que aponte para o source map. A sintaxe do comentário é assim:
//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map

No vídeo acima carregamos https://mdn.github.io/devtools-examples/sourcemaps-in-console/index.html. Essa página carrega um fonte chamado "main.js" que foi originalmente escrito em CoffeeScript e compilado para JavaScript. O fonte compilado contém um comentário assim, que aponta para o source map:

//# sourceMappingURL=main.js.map

No source list pane do Debugger, o fonte original CoffeeScript agora aparece como "main.coffee", e podemos acessá-lo para debugar como qualquer outra fonte.