javascript - DevTools 无法解析 SourceMap

Question

我正在尝试让我的 Webpack 项目拥有源映射文件。

我终于得到了正确的设置，所以它会这样做，但现在我收到这个错误:

DevTools failed to parse SourceMap: http://MyServer/MyApp/bundle.js.map

我转到它指出的 URL，我找到了一个具有这些属性的 json 文件:

• version - 设置为 3
• sources - 很长的字符串数组，似乎是我的文件的 webpack 路径。
• names - 很长的字符串数组，似乎是随机变量和函数。
• 映射 - 非常长的看似随机的国会字母和逗号字符串。
• file - 设置为 bundle.js
• sourcesContent - 非常非常长的字符串数组(超过 1000 万个字符)。我所有的源代码。
• sourceRoot - 设置为空字符串

这一切似乎都是有效的 json。不幸的是，Chrome 没有给出解析源映射失败的原因。

有没有办法让 Chrome 说出解析源映射失败的原因？

或者，如果失败，有人知道为什么我的源映射会失败吗？(我的代码太大而无法发布，但这是我的 webpack.config.js 和我的 package.json 文件。)

注意事项:

• 我已经在 webpack 2.2.1、webpack 2.3.2 和 webpack 2.6.1 上试过了。
• 源映射在 IE 11 和 Firefox 中运行良好。
• 如果我内联我的源映射，那么它们在 Chrome DevTools 中可以正常工作，但是我的 bundle.js 会从 3 MB(已经太大)变成 16 MB(太大了)。
• 我在设置中设置了“启用 JavaScript 源映射”(还有 CSS 设置)。
• 我尝试使用 Chrome Canary，但它遇到了同样的问题。
• 我在 IIS 中托管。

Answer 1

这不是这个问题的答案，但我相信我的回答可以帮助一些人。

这是由于 chrome 的设置，例如在 FF 中不会发生此错误警告。要修复它，请转到 Chrome 的开发人员工具设置，然后取消选中:

1. “启用 JavaScript 源映射”
2. “启用 CSS 源映射”

然后刷新 Chrome。

为了调试 js 和 scss 缩小文件，这告诉编译器源文件实际映射到哪里。

使用最新版本的 Webpack source-map 效果很好，我试图重现此错误，但无法运行项目，我看不出问题的作者有什么问题。

这个警告发生在例如使用 angular 和 sourceMap 应该在 angular.json 中设置为 true，或者如果你不这样做的话不要使用 source-map'ing'，并且您不想看到此警告，请在我的回答后在浏览器中禁用它。