Javascript DevTools 解析 SourceMap 失败
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44267503/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
DevTools failed to parse SourceMap
提问by Vaccano
I am trying to get my Webpack project to have a source map file.
我试图让我的 Webpack 项目有一个源映射文件。
I finally got the settings right so that it would do that, but now I am getting this error:
我终于得到了正确的设置，以便它可以做到这一点，但现在我收到了这个错误：
DevTools failed to parse SourceMap: http://MyServer/MyApp/bundle.js.map
DevTools 解析 SourceMap 失败：http://MyServer/MyApp/bundle.js.map
I go to the URL it states and I find a json file with these properties:
我转到它指出的 URL，我找到了一个具有以下属性的 json 文件：
- version- Set to 3
- sources- very long array of strings that seem to be webpack paths to my files.
- names- very long array of strings that seem to be random variables and functions.
- mappings- very long string of seemingly random capitol letters and commas.
- file- set to bundle.js
- sourcesContent- Very Very long array of strings (over 10 million chars). All my source code.
- sourceRoot- set to empty string
- 版本- 设置为 3
- 源- 很长的字符串数组，似乎是我文件的 webpack 路径。
- 名称- 很长的字符串数组，似乎是随机变量和函数。
- 映射- 一长串看似随机的大写字母和逗号。
- 文件- 设置为 bundle.js
- sourcesContent- 非常长的字符串数组（超过 1000 万个字符）。我所有的源代码。
- sourceRoot- 设置为空字符串
It all seems to be valid json. Unfortunally Chrome gives no reason why it failed to parse the source map.
这一切似乎都是有效的 json。不幸的是，Chrome 没有给出解析源映射失败的原因。
Is there a way to get Chrome to say why it failed parsing the source map?
有没有办法让 Chrome 说出它解析源地图失败的原因？
Or, failing that, does anyone know why my source map would fail?(My code is way too large to post, but here are my webpack.config.jsand my package.jsonfiles.)
或者，失败了，有谁知道为什么我的源地图会失败？（我的代码太大而无法发布，但这里是我的webpack.config.js和我的package.json文件。）
NOTES:
笔记：
- I have tried this with webpack 2.2.1, webpack 2.3.2 and webpack 2.6.1.
- Source maps work fine in IE 11 and Firefox.
- If I inline my source maps, then they work fine in Chrome DevTools, but then my bundle.js goes from 3 MB (already too big) to 16 MB (WAY too big).
- I have set "Enable JavaScript Source Maps" in settings (and the CSS one too).
- I tried using Chrome Canary, but it had the same issue.
- I am hosting in IIS.
- 我已经在 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 中托管。
回答by Arthur Tsidkilov
It is not an answer to this question, but i believe my answer can help some people.
这不是这个问题的答案，但我相信我的回答可以帮助一些人。
This is due to the settings of chrome, for example in FF this error warnings not happens. To fix it go to Developer Tools Settings of Chrome, and uncheck:
这是由于 chrome 的设置，例如在 FF 中不会发生此错误警告。要修复它，请转到 Chrome 的开发人员工具设置，然后取消选中：
- "Enable JavaScript source maps"
- "Enable CSS source maps"
- “启用 JavaScript 源映射”
- “启用 CSS 源映射”
Then refresh Chrome.
然后刷新 Chrome。
In order to debug jsand scssminified files, this tells the compiler where the source file is actually mapped.
为了调试js和scss缩小文件，这会告诉编译器源文件实际映射到的位置。
Using last versions of Webpack source-map work well, I tried to reproduce this bug, but without possibility to run a project, i can't see what a problem of author of a question.
使用最新版本的 Webpack 源映射运行良好，我尝试重现此错误，但无法运行项目，我看不出问题作者有什么问题。
This warning happening for example using angular, and sourceMapshould be set truein angular.json, or other way if you don't use source-map'ing' and you don't want see this warning disable it in browser following my answer.
此警告采用了棱角分明的发生为例，sourceMap应设置true在angular.json，或其他方式，如果你不使用源map'ing”，你不希望看到这个警告禁止它在浏览器下我的答案。
回答by Brendan Gannon
From experience, I wouldn't expect a client to tell you why it couldn't parse a SourceMap (although that would be nice). I have run into issues with some tools being unable to parse large source maps (probably memory constraints), and given your large asset size, I would look at that first.
根据经验，我不希望客户告诉您为什么它无法解析 SourceMap（尽管那会很好）。我遇到了一些工具无法解析大型源映射（可能是内存限制）的问题，鉴于您的资产规模很大，我会先看看这个。
Webpack supports several different values for the devtoolconfig field, and some of them are less faithful than the default. Have you tried, for example, 'cheap-module-source-map'? Getting line numbers only (no columns) is a fine trade off for a usable source map IMO.
Webpack 支持devtoolconfig 字段的几种不同值，其中一些值不如默认值那么忠实。例如，您是否尝试过'cheap-module-source-map'？仅获取行号（无列）对于可用的源映射 IMO 来说是一个很好的权衡。
But it will probably serve you better to reduce the asset size. Webpack's code splittingand 'chunk' management options make it pretty straightforward to split your code into multiple files that are loaded async at runtime. In this case you would have two or more JS files, and each would have its own source map, so the browser will no longer choke trying to process one big file.
但是减少资产规模可能会更好地为您服务。Webpack 的代码拆分和“块”管理选项使得将代码拆分为多个文件并在运行时异步加载变得非常简单。在这种情况下，您将有两个或多个 JS 文件，每个文件都有自己的源映射，因此浏览器将不再因尝试处理一个大文件而卡住。
回答by Luca Fagioli
In my case, I had to disable Adblockto get rid of the error.
就我而言，我必须禁用Adblock才能消除错误。
回答by Ali
It's possible that some chrome extensionsare messing with DevTools.
某些chrome 扩展可能会干扰 DevTools。
Perhaps, you could try disabling the ones you do not need for your particular app and see if that "fixes" the problem.
也许，您可以尝试禁用特定应用程序不需要的那些，看看是否“解决”了问题。
Above is the approach that worked for me but I'm not really sure why it does.
以上是对我有用的方法，但我不确定为什么会这样。
