即使客户端代码经过合并、压缩或编译，也可以继续保持可读、可调试。使用 source maps（源码映射），即可在 Sources 面板中把源代码映射到编译后的代码。

视频：使用 source maps 调试 （Video: Debug with source maps）

从预处理器开始

预处理器生成的 source maps 会让 DevTools 在加载压缩文件的同时加载原始文件。Chrome 实际执行的仍然是压缩代码，但 Sources 面板显示的是你编写的源代码。可以直接在源文件中设置断点、逐步执行，错误、日志和断点都会自动映射。

这样，调试时看到的就是自己编写的代码，而不是开发服务器提供、浏览器实际执行的代码形态。

要在 Sources 面板中使用 source maps，需要：

• 使用能够生成 source maps 的预处理器。
• 确认 Web 服务器能够提供 source maps 文件。

使用受支持的预处理器

常见的配套预处理工具包括但不限于：

• 转译器：Babel。
• 编译器：TypeScript 和 Dart。
• 压缩器：terser。
• 打包工具与开发服务器：Webpack、Vite、esbuild 和 Parcel。

更完整的列表见“Source maps：语言、工具及其他信息”。 （Source maps: Languages, tools, and other info）

在设置中启用 source maps

打开 Settings > Preferences > Sources，确认已勾选 JavaScript source maps（旧版界面称为 Enable JavaScript source maps）。

检查 source maps 是否加载成功

参阅“Developer Resources：查看和手动加载 source maps”。 （Developer Resources: View and load source maps manually）

使用 source maps 调试

准备好并启用 source maps 后，可以按以下步骤操作： （ready） （enabled）

1. 在 Sources 面板打开网站的源文件。 （Open your website’s sources）
2. 要专注于自己编写的代码，可以在文件树中按 authored 与 deployed 对源文件和部署文件分组。然后展开 Authored 部分，在 Editor 中打开原始源文件。 （group authored and deployed files in the file tree）

3. 照常设置断点，例如日志断点（logpoint），然后运行代码。 （Set a breakpoint）

4. 注意，Editor 底部状态栏会显示通向部署文件的链接。对于已部署的 CSS 文件，情况也相同。

5. 打开 Console 抽屉。在这个示例中，Console 在日志断点消息旁显示的是原始文件链接。 （Open the Console drawer）

6. 将断点类型改为普通断点，然后再次运行代码。这次执行会暂停。 （breakpoint type） （regular one）

注意，Call Stack 窗格显示的是原始文件名，而不是部署文件名。

7. 在 Editor 底部状态栏点击部署文件链接，Sources 面板会切换到对应文件。

打开部署文件时，如果 DevTools 找到了 //# sourceMappingURL 注释及关联的原始文件，就会显示提示。

注意，Editor 已自动对部署文件进行格式化显示。文件实际内容除了 //# sourceMappingURL 注释之外，全部代码都在同一行中。

使用 #sourceURL 为 eval() 调用命名

处理 eval() 调用时，#sourceURL 可以简化调试。它与 //# sourceMappingURL 指令看起来很相似，更多信息见 Source Map V3 规范。 （//# sourceMappingURL property） （Source Map V3 specification）

原文说明，//# sourceURL=/path/to/source.file 注释可在使用 eval() 时提供源文件名称，便于为求值代码以及内联脚本、样式命名。

可以在演示页面中尝试： （demo page）

1. 打开 DevTools，进入 Sources 面板。 （Open the DevTools）
2. 在页面的 Name your code: 输入框中填写任意文件名。
3. 点击 Compile 按钮。弹出的提示框会显示 CoffeeScript 源码求值后得到的总和。
4. 在 Page 窗格的文件树中，打开以刚才输入的自定义文件名命名的新文件。它包含编译后的 JavaScript 代码，其中的 // #sourceURL 注释带有源文件的原始名称。
5. 点击 Editor 状态栏中的链接，打开源文件。