被浏览器执行的JavaScript代码通常会以某种方式从开发人员创建的原始资源中转译而来。例如:
  • 源码通常会合并和最小化以高效的从服务器端获取
  • 页面中运行的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”,我们可以像调整任何其他源一样调试它。.

文档标签和贡献者

此页面的贡献者: mdnwebdocs-bot, Tommy-White, wbamberg, xgqfrms-GitHub
最后编辑者: mdnwebdocs-bot,