使用源映射

浏览器执行的 JavaScript 源代码通常会以某种方式从开发人员创建的原始源代码进行转换。例如

• 源代码通常会合并和 缩小，以便更有效地从服务器传递。

• 页面中运行的 JavaScript 通常是机器生成的，例如从 CoffeeScript 或 TypeScript 等语言编译而来。

在这些情况下，调试原始源代码比调试浏览器下载的转换后的状态下的源代码要容易得多。 源映射 是一个文件，它将转换后的源代码映射到原始源代码，使浏览器能够重建原始源代码并在调试器中显示重建后的原始源代码。

要使调试器能够使用源映射，您必须

• 生成源映射

• 在转换后的文件中包含一个指向源映射的注释。注释的语法如下所示

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

在上面的视频中，我们加载了 https://firefox-devtools.github.io/devtools-examples/sourcemaps-in-console/index.html。此页面加载了一个名为“main.js”的源代码，该源代码最初是用 CoffeeScript 编写的，并编译成了 JavaScript。编译后的源代码包含如下所示的注释，该注释指向一个源映射

//# sourceMappingURL=main.js.map

在调试器的 源列表窗格 中，原始的 CoffeeScript 源代码现在显示为“main.coffee”，我们可以像调试任何其他源代码一样调试它。