将预处理的代码映射到源代码

在你的代码合并,压缩或编译后,保持客户端代码可读性和可调试性。使用Source Maps(源码映射)将源代码映射到已编译的代码。

TL;DR

  • 使用Source Maps(源码映射)将压缩代码映射到源代码。然后,您可以在其原始源代码中读取和调试编译的代码。
  • 仅使用能够生成Source Maps(源码映射)的预处理器。
  • 验证您的web 服务器是否可以为Source Maps(源码映射)提供服务。

开始使用预处理器

本文介绍在 DevTools 的 Sources(源文件)面板中如何与JavaScript Source Maps(源码映射)交互。有关什么是预处理器,它们起到什么作用,Source Maps是如何工作的,请首先查看 设置CSS和JS预处理器

使用一个支持的预处理器

你需要使用一个能够创建 Source Maps(源码映射) 的 minifier。对于最受欢迎的选择,请参阅我们的预处理器支持部分。 对于扩展视野的话,可以在wiki上参阅Source Maps:语言,工具和其他信息

以下类型的预处理器通常与Source Maps(源码映射)结合使用:

  • Transpilers(转译工具) (Babel, Traceur)
  • Compilers(编译工具) (Closure Compiler, TypeScript, CoffeeScript, Dart)
  • Minifiers(压缩工具) (UglifyJS)

DevTools Sources(源文件)面板中 Source Maps(源码映射)

来自预处理器的Source Maps(源码映射)会使DevTools加载您的原始文件,而不是压缩后的文件。然后你可以使用源文件来设置断点以及调试代码。同时,Chrome实际上运行的是压缩后的代码。这会让你产生一种错觉,运行生产环境的网站像在开发环境中一样。

当在DevTools中运行Source Maps(源码映射)时,你会注意到JavaScript并没有被编译,你可以看到它引用的所有单独的JavaScript文件。这使用了Source Maps(源码映射),但在幕后实际运行的是编译后的代码。任何错误,日志和断点将映射到开发的代码中,这对于调试代理来说非常方便!所以实际上它给你的错觉,你在生产环境中运行一个开发环境中的网站。

settings(设置)中启用 Source Maps(源码映射)

默认情况下,Source Maps(源码映射)已启用(从Chrome 39起),但如果你想要仔细检查或启用它们,首先打开DevTools并 打开主菜单,然后选择Settings(设置),如图:

在打开的设置对话框中,在Sources标签下,勾选Enable JavaScript Source Maps(启用JavaScript Source Maps)。您还可以勾选Enable CSS Source Maps(启用 CSS Source Maps)。

使用Source Maps(源码映射)调试

当调试代码和Source Maps(源码映射)启用时,Source Maps(源码映射)将显示在两个地方:

  • Console(控制台)中(链接到源应该是原始文件,而不是生成的)
  • 当单步执行代码(call stack(调用堆栈)窗格中的链接应该打开原始源文件)

@sourceURL 和 displayName

虽然不是Source Maps(源码映射)规范的一部分,@sourceURL允许你使用evals时使开发变得更加容易。这个看起来非常类似于//# sourceMappingUR属性,实际上在Source Map V3规范中提到。

通过在代码中包含以下特殊注释,这将被评估,您可以命名evals和内联脚本和样式,因此它们在您的DevTools中显示为更为逻辑的名称。

//# sourceURL=source.coffee

打开demo,然后:

  • 打开 DevTools 并转到 Sources(源文件)面板。
  • Name your code:输入框中,输入一个文件名。
  • 点击Compile(完成)按钮。
  • 将显示一条包含CoffeeScript源代码中的求值总和的警告。

如果展开Sources(源文件)面板中Sources窗格,您现在将将看到你之前输入自定义文件名的新文件。如果你双击查看这个文件,它将包含我们原始源的编译的JavaScript。然而,在最后一行,将是一个// @sourceURL注释,指示原始源文件是什么。当使用语言抽象时,这对于调试有极大帮助。

注:'//@ sourceURL' 和 '//@ sourceMappingURL' 已经过时, 请使用 '//# sourceURL=' 和 '//# sourceMappingURL=' 代替。