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

Sofia Emelianova

GitHub

您可以使用开发者资源标签页检查开发者工具是否已成功加载源代码映射。如果需要，您可以手动加载它们。

要点：若要了解源代码映射如何可让您更轻松地进行调试，请参阅调试原始代码，而不是使用源代码映射进行部署。

当您打开开发者工具时，它会尝试加载源代码映射（如果有）。如果失败，控制台会记录类似如下的错误。

在 Developer Resources 抽屉式导航栏标签页中，您可以查看源代码映射的加载状态，甚至可以手动加载源代码映射。

打开“开发者资源”并查看状态

如需检查来源映射的加载状态，请执行以下操作：

1. 打开开发者工具，确保启用源代码映射，然后依次转到 > 更多工具 > 开发者资源。

2. 在表格中，检查以下列中的值：

   • Status，用于查看来源映射加载是成功还是失败。
   • Error：用于读取错误消息（如果有）。

按网址或错误过滤资源

如需关注您感兴趣的源代码映射，请在顶部的文本框中输入文本，以过滤掉网址或错误消息中不包含此文本的来源映射。

问题排查

默认情况下，开发者工具请求的是源代码映射，而不是网站。此类请求可能会被视为跨源请求，可能无法通过。

若要先请求网站请求源代码映射，请选中开发者资源右上角的 启用通过目标加载。

如果您加载源代码映射时仍然遇到问题，请尝试按照下文所述手动加载它们。

手动加载源代码映射

如果您遇到加载失败的问题，或者（例如）想在生产环境中在缺少源映射的网站上调试原始代码，则可以手动加载代码：

1. 使用支持源代码映射的工具生成源代码映射。
2. 在本地托管源映射。
3. 在您的页面上打开开发者工具，并确保启用源代码映射。

4. 在 Sources 中打开已部署（已处理）的文件，在 Editor 中右键点击该文件，然后从菜单中选择 Add source map（添加源代码映射）。

   

5. 在文本框中，指定来源映射网址，然后点击添加。

   

6. 检查源代码映射是否显示在开发者资源中，以及文件树中的原始文件（从已部署的文件映射而来）。

   

7. 继续调试原始文件。