DevTools 无法解析 SourceMap答案

【问题标题】：DevTools failed to parse SourceMapDevTools 无法解析 SourceMap
【发布时间】：2017-10-31 05:44:33
【问题描述】：

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

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

DevTools 解析 SourceMap 失败：http://MyServer/MyApp/bundle.js.map

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

这一切似乎都是有效的 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 中托管。

【问题讨论】：

这似乎是 chrome 的问题，有同样的问题，但从未找到答案。我得到的最接近的是设置 devtool: 'source-map' 并手动确保将工作文件添加到源选项卡中。
** 问题是 chrome 无法读取大型源图
这是一个可能的原因 - Chrome 错误：superuser.com/a/1526134/286913

【解决方案1】：

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

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

然后刷新 Chrome。

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

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

这个警告发生在例如使用 angular 时，sourceMap 应该在 angular.json 中设置true，或者如果你不使用 source-map'ing' 并且你不想看到这个警告按照我的回答在浏览器中禁用它。

【讨论】：

【解决方案2】：

有可能某些 chrome 扩展 会干扰 DevTools。

也许，您可以尝试禁用您的特定应用不需要的那些，看看是否“解决”了问题。

以上是对我有用的方法，但我不确定为什么会这样。

【讨论】：

【解决方案3】：

就我而言，我不得不禁用 Adblock 以消除错误。

【讨论】：

【解决方案4】：

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

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

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

【讨论】：