Utilizar um "source map"

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.