使用 source map - Firefox 开发者工具 编辑

• 源码通常会合并和最小化以高效的从服务器端获取
• 页面中运行的JavaScript通常是机器生成的，就像从CoffeeScript或TypeScript这样的语言编译时一样。

在这些场景下，调试原始源代码会比浏览器下载的转换后的代码更加容易。 source map 是从已转换的代码映射到原始源的文件，使浏览器能够重构原始源并在调试器中显示重建的原始源。

为了调试工作能够使用source map，你必须：

• 生产一个source map
• 加入一个注释在转换后的文件，它指向source map。注释的语法类似：

//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map

在此视频我们加载了 https://mdn.github.io/devtools-examples/sourcemaps-in-console/index.html. 页面加载一个名为“main.js”的源，该源最初是用CoffeeScript编写的，并编译为JavaScript。已编译的源包含这样的注释，指向源映射：

//# sourceMappingURL=main.js.map

在调试器的 source list pane 中，原始的CoffeeScript源现在显示为“main.coffee”，我们可以像调整任何其他源一样调试它。.