无法在Chrome开发工具中找到JavaScript源映射以进行调试

Question

我在一个 .Net 项目中使用 webpack 来打包我的 JavaScript 文件。最近我遇到了一个 bug，我想使用 Chrome 开发者工具进行调试。

在我的 webpack 配置文件中，我添加了以下代码以生成源映射。

devtool: 'source-map'

在运行了命令 npx webpack 之后，以下文件被生成在我的 dist 文件夹中。 所以我确定这些文件已经生成。当我在 Chrome 调试器中打开 resources.entry.js 时，我看到了下面的内容。 然而，我似乎无法找到源映射文件，以便我能够设置断点，我在目录树里也找不到它。 而且我似乎无法像 Chrome 建议的那样使用 Ctrl+P 查找它。 我需要做什么才能使用我的源 JavaScript 文件进行调试？

谢谢。

- onTheInternet

---

参见：在Chrome中检测到源映射，但原始源未加载 - KyleMit

Answer 1

你需要在 dev-tools 中手动添加源代码映射。以下是步骤。

1. 打开 DevTools
2. 打开源代码选项卡
3. 打开最小化的 JS 文件
4. 在源代码（编辑器）区域右键单击
5. 选择“添加源代码映射”选项
6. 输入源代码映射名称

此外，请确保启用了源代码映射。 （请检查：https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps）

更新：Chrome 85中也提供此功能。

- Chathuranga

---

在 Chrome 85 中，没有“添加源映射（Add source maps）”菜单项。 - Patrik Laszlo

我在Chrome 86中也没有看到“添加源映射”的选项。或者如果Chrome检测到网站的源映射，它不会出现吗？我可以通过某种方式将其删除以添加自己的源映射吗？ - Snackoverflow

找到它后，您需要专门选择连接的js文件，然后在其编辑器视图中右键单击。如果您选择其他文件并在编辑器视图中右键单击，则不会出现“添加源映射”选项。您可能希望在步骤2和步骤3之间添加该步骤 :) - Snackoverflow

我尝试添加了它，但是没有任何效果，应该使用什么URL？我添加的是与处理过的JS文件中出现的相同，但不起作用。 - Matteo

@Matteo 我找到了... http://localhost:4200/main.js.map 对我有效！ - Jasper

Answer 2

尽管Chathuranga的答案在我的Chrome DevTools中无效，但我已经找到了解决问题的方法。

Chrome版本：102.0.5005.115（官方版）（arm64）

步骤1：打开DevTools。

步骤2：选择右上角的设置图标： 步骤3：首选项-勾选“启用JavaScript源映射：”选项。

- Kelei Ren

---

如果已勾选“启用JavaScript源映射”，但源映射仍未出现，则您还应检查“忽略列表”选项卡。在我的情况下，源文件不知何故被添加到了忽略列表中。我无法回想起何时添加的，可能是我误点了什么。 - Botond Balogh

Answer 3

如果其他解决方案无效，您可以尝试这个：

devtool: inline-source-map 这样，您就可以将源映射包含在捆绑包中。

- Ömer Hattapoğlu

Answer 4

我来到这里是因为我也遇到了源映射的问题。

症状：

• Chrome开发工具显示缩小后的index.js。
• 文件末尾有一个正确的//* sourceMappingURL=index.js.map。
• 在代码中右键单击并选择“添加源映射”会弹出一个对话框，但填写它永远没有任何效果。

最终我发现Chrome似乎不支持或存在源映射在ipv6 URL上的错误。

例如：如果您正在针对像http://[2006:...:42]:8080/index.js这样的URL进行开发，则不会尝试加载源映射。很有趣！

我通过重新启动我的开发服务器并（同时）绑定到ipv4地址来解决它。

- Cody Casterline