DevTools未能解析SourceMap

Question

我试图让我的Webpack项目有一个源图文件。

我最终得到了正确的设置，这样它就可以这样做了，但是现在我得到了这个错误：

DevTools未能解析SourceMap：http://MyServer/MyApp/bundle.js.map

我转到它声明的URL，找到一个具有以下属性的json文件：

• 版本-设置为3
• 来源-非常长的字符串阵列，似乎是webpack路径到我的文件。
• 名称-似乎是随机变量和函数的非常长的字符串数组。
• 映射-看似随机的大写字母和逗号的长串。
• 文件设置为bundle.js
• sourcesContent -非常长的字符串数组(超过1000万个字符)。我所有的源代码。
• sourceRoot -设置为空字符串

这一切似乎都是有效的。不幸的是，Chrome没有给出为什么它不能解析源地图的理由。

有没有办法让Chrome说它为什么不能解析源地图？

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

备注：

• 我已经和webpack 2.2.1，webpack 2.3.2，以及webpack 2.6.1试过了。
• 源地图在IE11和Firefox中工作得很好。
• 如果我内联我的源代码地图，那么它们在Chrome DevTools中工作得很好，但是我的bundle.js从3MB(已经太大)到16 MB (太大了)。
• 我已经在设置中设置了“启用JavaScript源地图”(也设置了CSS源映射)。
• 我试过使用，但它也有同样的问题。
• 我在IIS中托管。

Answer 1

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

这是由于铬的设置，例如在FF中这个错误警告不会发生。要修复它，请转到Chrome的Developer Tools Settings，并取消检查：

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

然后刷新Chrome。

为了调试js和scss小型化文件，这将告诉编译器源文件实际映射到何处。

使用Webpack源图的最后版本很好，我试着复制这个bug，但没有可能运行一个项目，我看不出一个问题的作者的问题。

这个警告发生在例如使用角，sourceMap应该设置为true在angular.json，或者其他方式，如果你不使用源地图‘’，你不想看到这个警告在浏览器中禁用它跟随我的答案。

Answer 2

根据经验，我不希望客户端告诉您为什么不能解析SourceMap (尽管这样做很好)。我遇到了一些工具无法解析大型源映射(可能是内存约束)的问题，考虑到您的大型资产大小，我首先来看看。

Webpack支持devtool配置字段的几个不同值，其中一些值不像默认值那样可靠。例如，你试过'cheap-module-source-map'吗？只获取行号(没有列)对于可用的源地图IMO来说是一个很好的权衡。

但缩减资产规模可能会更好。Webpack的码分裂和“块”管理选项使得将代码分割成多个在运行时加载异步的文件变得非常简单。在这种情况下，您将有两个或多个JS文件，每个文件都有自己的源映射，因此浏览器将不再限制处理一个大文件的工作。

Answer 3

在我的例子中，我不得不禁用Adblock以消除错误。