Google chrome Can'；在chrome开发工具中找不到要调试的javascript源代码映射

我在一个.Net项目中使用webpack捆绑我的javascript文件。我最近遇到了一个bug，我想用chrome开发工具调试它

在我的webpack配置文件中，我添加了以下行以生成源地图

devtool: 'source-map'

运行

npx webpack

后，在我的

dist

文件夹中生成了以下文件。

所以我确信这些文件是生成的。当我在chrome调试器中打开resources.entry.js时，我看到以下内容

然而，我似乎无法真正找到源地图以便放置断点。我在树上找不到它

而且我似乎不能像Chrome建议的那样用ctrl+p来搜索它

我需要做什么才能使用源javascript文件进行调试

---

多谢各位

您需要在开发工具中手动添加源映射。以下是步骤

打开开发工具

开放源代码选项卡

打开缩小的JS文件

在源代码（编辑器）区域中单击鼠标右键

选择选项“添加源地图”

输入源映射的名称

另外，请确保启用了sourcemaps。（勾选此项：）

更新：它在chrome 85中也可用

---

手动添加是我缺少的步骤。我现在可以在文档树中看到它并添加断点。谢谢。在Chrome85中，没有“添加源地图”菜单项。Chrome85中也有。用屏幕截图更新了答案。找到它，你必须特别选择连接的js文件，并在编辑器视图中右键单击。如果选择其他文件并在编辑器视图中右键单击，“添加源地图”选项将不会出现。您可能希望在步骤2和3之间添加该步骤：）我已尝试添加它，但它没有任何作用，url应该是什么？我添加了处理过的js文件中显示的相同内容，但不起作用请参见：