DevTools无法解析SourceMap

Question

我试图让我的Webpack项目有一个源映射文件.

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

DevTools无法解析SourceMap:http://MyServer/MyApp/bundle.js.map

我转到它声明的URL,我找到了一个带有这些属性的json文件:

• 版本 - 设置为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(WAY太大).
• 我在设置中设置了"启用JavaScript源地图"(也是CSS设置).
• 我尝试使用Chrome Canary,但它有同样的问题.
• 我在IIS中托管.

Answer 1

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

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

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

然后刷新 Chrome。

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

使用最新版本的 Webpack 源映射运行良好，我尝试重现此错误，但无法运行项目，我看不出问题作者有什么问题。

此警告采用了棱角分明的发生为例，sourceMap应设置true在angular.json，或其他方式，如果你不使用源map'ing”，你不希望看到这个警告禁止它在浏览器下我的答案。

Answer 2

根据经验，我不希望客户告诉您为什么它无法解析 SourceMap（尽管那会很好）。我遇到了一些工具无法解析大型源映射（可能是内存限制）的问题，鉴于您的资产规模很大，我会先看看这个。

Webpack 支持devtoolconfig 字段的几种不同值，其中一些值不如默认值那么忠实。例如，您是否尝试过'cheap-module-source-map'？仅获取行号（无列）对于可用的源映射 IMO 来说是一个很好的权衡。

但是减少资产规模可能会更好地为您服务。Webpack 的代码拆分和“块”管理选项使得将代码拆分为多个文件并在运行时异步加载变得非常简单。在这种情况下，您将有两个或多个 JS 文件，每个文件都有自己的源映射，因此浏览器将不再因尝试处理一个大文件而卡住。

Answer 3

就我而言，我必须禁用Adblock才能消除错误。