调试原始代码，而不是使用源代码映射进行部署

Meggin Kearney

Paul Bakaus

Sofia Emelianova

即使合并、缩减或编译了客户端代码，也要确保其可读性和可调试性。在 Sources 面板中，使用源代码映射将源代码映射到编译代码。

开始使用预处理器

来自预处理器的源代码映射会导致开发者工具除了加载缩减版文件之外，还会加载原始文件。

Chrome 实际上会运行经过缩减的代码，但来源面板会显示您编写的代码。您可以在源文件中设置断点并单步调试代码，所有错误、日志和断点都会自动映射。

这样，您就可以在编写代码时进行调试，而不是由开发服务器提供并由浏览器执行代码。

如需在来源面板中使用源代码映射，请执行以下操作：

• 请仅使用可生成源映射的预处理器。
• 验证您的 Web 服务器是否可以提供源映射。

使用受支持的预处理器

与源代码映射搭配使用的常见预处理器包括但不限于：

• 转译器：Babel
• 编译器：TypeScript 和 Dart
• 缩减工具：terser
• 捆绑器和开发服务器：Webpack、Vite、esbuild 和 Parcel

如需查看完整列表，请参阅源映射：语言、工具和其他信息。

在“设置”中启用源代码映射

在 设置 > 偏好设置 > 来源 中，请务必选中 JavaScript 源映射。

检查源映射是否已成功加载

请参阅开发者资源：手动查看和加载源代码映射。

使用源映射进行调试

源代码映射就绪且已启用后，您可以执行以下操作：

1. 在来源面板中打开您网站的来源。

2. 如需仅关注您编写的代码，请在文件树中对编写的文件和已部署的文件进行分组。然后展开 Authored（作者）部分，并在 Editor（编辑器）中打开原始源文件。