在 chrome devtools 中找不到要调试的 javascript 源映射
Can't find javascript source map to debug in chrome devtools
我在 .Net 项目中使用 webpack 来捆绑我的 javascript 文件。我最近 运行 遇到了一个错误，我想使用 chrome 开发工具进行调试。
在我的 webpack 配置文件中，我添加了以下行来生成源映射。
devtool: 'source-map'
在 运行 npx webpack 之后，在我的 dist 文件夹中生成了以下文件。
所以我确定这些文件是生成的。当我在 chrome 调试器中打开 resources.entry.js 时，我看到以下内容。
但是，我似乎无法真正找到源映射以便放置断点。我在树上找不到它。
而且我似乎无法像 Chrome 建议的那样进行 ctrl + p 搜索。
我究竟需要做什么才能使用源 javascript 文件进行调试？
谢谢。
您需要在开发工具中手动添加源映射。以下是步骤。
- 打开 DevTools
- 打开源选项卡
- 打开缩小后的 JS 文件
- 在源代码（编辑器）区域右击
- Select 选项“添加源映射”
- 输入源地图的名称
此外，请确保您启用了源地图。 （检查这个：https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps）
更新：它在 chrome 85 中也可用。
我来到这里是因为我也遇到了源映射问题。
症状：
- Chrome 开发工具显示缩小后的 index.js.
- 文件末尾有一个正确的
//* sourceMappingURL=index.js.map。
- right-clicking在代码中选择“add source map”弹出了一个对话框window，但是填进去从来没有任何效果。
我终于发现 Chrome 似乎不支持 ipv6 URLs 上的源映射，或者有一个错误。
即：如果您正在针对 http://[2006:...:42]:8080/index.js 之类的 URL 进行开发，它将不会尝试加载源地图。好玩！
我通过重新启动我的开发服务器并（也）绑定到一个 ipv4 地址来解决这个问题。
我在 .Net 项目中使用 webpack 来捆绑我的 javascript 文件。我最近 运行 遇到了一个错误，我想使用 chrome 开发工具进行调试。
在我的 webpack 配置文件中，我添加了以下行来生成源映射。
devtool: 'source-map'
在 运行 npx webpack 之后，在我的 dist 文件夹中生成了以下文件。
所以我确定这些文件是生成的。当我在 chrome 调试器中打开 resources.entry.js 时，我看到以下内容。
但是，我似乎无法真正找到源映射以便放置断点。我在树上找不到它。
而且我似乎无法像 Chrome 建议的那样进行 ctrl + p 搜索。
我究竟需要做什么才能使用源 javascript 文件进行调试？
谢谢。
您需要在开发工具中手动添加源映射。以下是步骤。
- 打开 DevTools
- 打开源选项卡
- 打开缩小后的 JS 文件
- 在源代码（编辑器）区域右击
- Select 选项“添加源映射”
- 输入源地图的名称
此外，请确保您启用了源地图。 （检查这个：https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps）
更新：它在 chrome 85 中也可用。
我来到这里是因为我也遇到了源映射问题。
症状：
- Chrome 开发工具显示缩小后的 index.js.
- 文件末尾有一个正确的
//* sourceMappingURL=index.js.map。 - right-clicking在代码中选择“add source map”弹出了一个对话框window，但是填进去从来没有任何效果。
我终于发现 Chrome 似乎不支持 ipv6 URLs 上的源映射，或者有一个错误。
即：如果您正在针对 http://[2006:...:42]:8080/index.js 之类的 URL 进行开发，它将不会尝试加载源地图。好玩！
我通过重新启动我的开发服务器并（也）绑定到一个 ipv4 地址来解决这个问题。