若要在 DevTools 中调试 JavaScript 时查看和使用原始源代码，而不必使用 Web 服务器返回的代码的编译和缩小版本，请使用源映射。
源映射使客户端代码保持可读性和可调试性，即使在生成过程编译和最小化代码并将其合并到单个文件之后也是如此。 源映射将编译的缩小代码映射到原始源代码文件。 然后，在 DevTools 中，可以读取和调试熟悉的原始源代码，而不是无法识别的转换和编译代码。
若要使用此源映射技术，必须使用可以生成源映射的预处理器。 确保 Web 服务器可以提供源映射。
预处理器入门
本文介绍如何在源工具中与 JavaScript
源
映射交互。
使用支持的预处理器
使用能够创建源映射的微型化器。
有关扩展视图，请参阅
源映射：语言、工具和其他信息
Wiki 页。
以下类型的预处理器通常与源映射结合使用：
转译器 (
Babel
、
Traceur
) 。
编译器 (
闭包编译器
、
TypeScript
、
CoffeeScript
、
Dart
) 。
(
UglifyJS
) 的微型化器。
来自预处理器的源映射会导致 DevTools 加载原始文件以及缩小的文件。 然后，使用原始代码设置断点和单步执行代码。 同时，Microsoft Edge 实际上正在运行缩小的代码。 代码的运行使你产生在生产环境中运行开发站点的错觉。
在 DevTools 中运行源映射时，应注意到 JavaScript 未编译，并且显示它引用的所有单个 JavaScript 文件。 DevTools 中的源映射使用源映射，但基础功能实际上运行编译后的代码。
任何错误、日志和断点都映射到原始源代码，以便于调试。
在“设置”中启用源映射
默认情况下，源映射处于启用状态。
若要确保启用源映射，请：
若要打开 DevTools，请在 Microsoft Edge 中右键单击网页，然后选择“
检查
”。 或者，按
Ctrl+Shift+I
(Windows、Linux) 或
Command+Option+I
(macOS) 。
在 DevTools 中，单击
“设置”
(
) >
“首选项
”。
在
“首选项”
页
的“源
”部分中，确保选中
“启用 JavaScript 源映射
”复选框和
“启用 CSS 源映射
”复选框：
在
“设置”
的右上方，单击“
关闭
(
x
) ”按钮。
使用源映射进行调试
启用
调试代码
和源代码映射时，会在多个位置使用源映射：
在
控制台
工具中，从日志消息到源文件的链接将转到原始文件，而不是已编译的文件。
在
源
工具中单步执行代码时，原始文件将显示在左侧的“
导航器
”窗格中。
在
“源
”工具中，“
调试器
”窗格的
“调用堆栈
”中显示的指向源文件的链接将打开原始源文件。
杂
//# sourceURL
注（如 ）
// # sourceURL=myFileName
是一种约定，允许在处理已评估的 JavaScript 文件时更轻松地进行开发。 在 之前或之后
#
可以有空格字符。
当
eval()
使用 函数加载 JavaScript 文件并对其进行评估时，
源
工具没有文件名可在
“导航器
”窗格中显示这些文件。 通过在代码中包含以下特殊注释，可以命名评估的文件、内联脚本和样式，以便每个文件在
“源”
工具中显示为可识别的文件名。 例如：
//# sourceURL=source.coffee
通过将源映射发布到 Azure Artifacts 符号服务器来安全地调试原始代码
使用 Azure Artifacts 符号服务器源映射安全地调试原始代码
源映射监视器工具
此页面的部分内容是基于 Google 创建和 共享 的工作进行的修改，并根据 Creative Commons 署名 4.0 国际许可中所述的条款使用。
原始页面 在此处 找到，由 Meggin Kearney (Technical Writer) 和 Paul Bakaus (Open Web Developer Advocate， Google： Tools， Performance， Animation， and UX) 创作。
此作品根据 Creative Commons 署名 4.0 国际许可获得许可。
