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和我的{{3}文件。）

注意：

• 我尝试过使用webpack 2.2.1，webpack 2.3.2和webpack 2.6.1。
• 源地图在IE 11和Firefox中运行良好。
• 如果我内联我的源地图，那么它们在Chrome DevTools中工作正常，但我的bundle.js从3 MB（已经太大）变为16 MB（太大了）。
• 我已设置＆＃34;启用JavaScript源地图＆＃34;在设置中（以及CSS也是如此）。
• 我尝试过使用Chrome Canary，但它有同样的问题。
• 我在IIS中托管。

Answer 1

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

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

1. “启用JavaScript源地图”
2. “启用CSS源地图”

然后刷新Chrome。

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

使用最新版本的Webpack源代码映射效果很好， 我试图重现此错误，但没有运行项目的可能性，我看不到问题作者的问题。

例如，此警告是使用角度警告而发生的，应在sourceMap中将true设置为angular.json，如果您不使用源映射，而又不使用不想按照我的回答在浏览器中禁用此警告。

Answer 2

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

Answer 3

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

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

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

Answer 4

您是否尝试下载Vue.js devtools扩展名？

或通过npm install vue-devtools安装。

接下来，请确保您禁用在Chromium浏览器中的“启用JavaScript源地图”复选框。这两个操作都为我消除了控制台中的SourceMap错误。

它应该像这样：

Answer 5

某些 chrome扩展可能与DevTools混淆。

也许，您可以尝试禁用特定应用程序不需要的应用程序，然后查看是否可以“解决”问题。

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