在 chrome devtools 中找不到要调试的 javascript 源映射

Question

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

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

devtool: 'source-map'

运行后npx webpack在我的dist文件夹中生成了以下文件。

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

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

而且我似乎无法ctrl + p像 Chrome 建议的那样搜索它。

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

谢谢你。

Answer 1

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

1. 打开开发工具
2. 开源选项卡
3. 打开缩小后的 JS 文件
4. 右键单击源代码（编辑器）区域
5. 选择选项“添加源地图”
6. 输入源映射的名称

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

更新：它在 chrome 85 中也可用。