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

Meggin Kearney

Paul Bakaus

Sofia Emelianova

让您的客户端代码保持可读和可调试性，即使在您组合、缩减或编译代码后也应如此。在 Sources 面板中，使用源代码映射将您的源代码映射到经过编译的代码。

预处理器使用入门

来自预处理器的源映射会导致开发者工具加载您的原始文件以及缩减过的文件。

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

与由开发服务器提供并由浏览器执行的代码不同，这为您提供了调试代码的外观（如您所编写的代码）。

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

• 仅使用可以生成源映射的预处理器。
• 验证您的网络服务器可以提供源代码映射。

使用受支持的预处理器

与源映射结合使用的常见预处理器包括但不限于：

• 翻译器：Babel
• 编译器：TypeScript 和 Dart
• 缩减器：terser
• Bundler 和开发服务器：Webpack、Vite、esbuild 和 Parcel

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

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

在 Settings > Preferences > Sources 中，请务必勾选 Enable JavaScript source maps。

注意：您可能还需要勾选 启用 CSS 源代码映射。

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

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

使用源代码映射进行调试

注意：本教程以此演示版为例。

在源代码映射 ready 和 enabled 之后，您可以执行以下操作：

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

2. 如果只想专注于由您编写的代码，请在文件树中将编写和部署的文件分组。然后，展开 Authored 部分，并在编辑器中打开原始源文件。

   

3. 按照常规方式设置断点。例如，日志点。然后运行代码。

   

4. 请注意，编辑器会在底部的状态栏中放置一个指向已部署文件的链接。同样，它对已部署的 CSS 文件执行此操作。

   

5. 打开 Console 抽屉式导航栏。在此示例中，控制台会在日志点的消息旁边显示指向原始文件的链接，而非已部署文件的链接。

   

6. 将断点类型更改为常规断点类型，然后再次运行代码。这次执行会暂停。

   

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

7. 在编辑器底部的状态栏中，点击指向已部署文件的链接。Sources 面板会将您转到相应的文件。

当您打开任何已部署的文件时，开发者工具会通知您是否找到了 //# sourceMappingURL 注释和关联的原始文件。

请注意，Editor 会自动为部署的文件整齐显示。实际上，除了 //# sourceMappingURL 注释外，它的所有代码都在一行中。

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

借助 #sourceURL，您可以在处理 eval() 调用时简化调试。此帮助程序与 //# sourceMappingURL 属性非常相似。如需了解详情，请参阅 Source Map V3 规范。

当您使用 eval() 时，//# sourceURL=/path/to/source.file 注释会告知浏览器查找源文件。这有助于您为评估以及内嵌脚本和样式命名。

在此演示页面上进行测试：

1. 打开开发者工具，然后转到 Sources 面板。
2. 在该页面上的 Name your code: 输入字段中输入任意文件名。
3. 点击 Compile 按钮。系统会显示一条提醒，以及 CoffeeScript 源的评估和。
4. 在页面窗格的文件树中，使用您输入的自定义文件名打开一个新文件。该文件包含经过编译的 JavaScript 代码，其中 // #sourceURL 注释为源文件的原始名称。
5. 要打开源文件，请点击编辑器状态栏中的链接。