确保客户端代码便于阅读和调试，即使在您组合、缩减或编译代码后也是如此。使用源代码映射在 Sources 面板中将您的源代码映射到经过编译的代码。
预处理器使用入门
预处理器中的源映射会使开发者工具在加载缩减文件的同时加载原始文件。
Chrome 会实际运行您缩减的代码，但 Sources 面板会显示您编写的代码。 您可以在源文件中设置断点并单步调试代码，所有错误、日志和断点都会自动映射。
这样，您看到的调试代码就会按照您编写的代码进行调试，而不是您的开发服务器提供并由浏览器执行的代码。
如需在 Sources 面板中使用源代码映射，请执行以下操作：
- 仅使用可以生成源映射的预处理器。
- 验证您的 Web 服务器是否可以提供源映射。
使用受支持的预处理器
与源映射结合使用的常见预处理器包括但不限于：
如需获取完整列表，请参阅源代码映射：语言、工具和其他信息。
在“设置”中启用源代码映射
在 
Settings > Preferences > Sources 中，确保选中 
Enable JavaScript source maps（启用 JavaScript 源代码映射）。
检查是否已成功加载来源映射
使用源代码映射进行调试
- 在“来源”面板中打开您网站的来源。
若要仅关注您编写的代码，请在文件树中将编写和部署的文件分组。然后，展开
已编写部分，并在编辑器中打开原始源文件。
按照常规方式设置断点。例如，logpoint。然后运行代码。
请注意，Editor 在底部的状态栏中放置了一个指向已部署文件的链接。同样，它也会对已部署的 CSS 文件执行此操作。
打开 Console 抽屉式导航栏。在此示例中，控制台会在日志点的消息旁边显示一个指向原始文件（而非已部署文件）的链接。
将断点类型更改为常规类型，然后再次运行代码。这次执行会暂停。
请注意，Call Stack 窗格显示原始文件的名称，而不是已部署的文件的名称。
在 Editor 底部的状态栏中，点击指向已部署文件的链接。Sources 面板会将您转到相应的文件。
当您打开任何已部署的文件时，DevTools 会在找到 //# sourceMappingURL 注释和关联的原始文件时通知您。
请注意，Editor 会自动对部署的文件进行美观输出。实际上，它将所有代码都包含在一行中，但 //# sourceMappingURL 注释除外。
使用 #sourceURL 为 eval() 通话命名
借助 #sourceURL，您可以在处理 eval() 调用时简化调试过程。此帮助程序与 //# sourceMappingURL 属性非常相似。如需了解详情，请参阅来源映射 V3 规范。
当您使用 eval() 时，//# sourceURL=/path/to/source.file 注释会告知浏览器查找源文件。这有助于您为评估以及内嵌脚本和样式命名。
请在此演示页面上进行测试：
- 打开开发者工具，然后前往 Sources 面板。
- 在该网页上的 Name your code: 输入字段中输入任意文件名。
- 点击 Compile 按钮。此时，系统会显示一条提醒，其中包含 CoffeeScript 来源的评估和。
- 在 Page 窗格的文件树中，使用您输入的自定义文件名打开一个新文件。该文件包含已编译的 JavaScript 代码，该代码的
// #sourceURL注释具有源文件的原始名称。 - 要打开源文件，请点击 Editor 状态栏中的链接。
