DevTools无法解析SourceMap [英] DevTools failed to parse SourceMap

问题描述

我正在尝试让我的Webpack项目具有源映射文件.

I am trying to get my Webpack project to have a source map file.

我终于正确地进行了设置，以便可以执行此操作，但是现在出现了此错误:

I finally got the settings right so that it would do that, but now I am getting this error:

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

我转到其指出的URL，然后找到具有以下属性的json文件:

I go to the URL it states and I find a json file with these properties:

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

• 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

这似乎都是有效的json.不幸的是，Chrome没有给出未能解析源地图的原因.

It all seems to be valid json. Unfortunally Chrome gives no reason why it failed to parse 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.js and my package.json files.)

注意:

• 我已经使用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中托管.

推荐答案

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

It is not an answer to this question, but i believe my answer can help some people.

这是由于chrome的设置，例如，在FF中，不会发生此错误警告. 要解决此问题，请转到Chrome的开发者工具设置，然后取消选中:

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:

1. 启用JavaScript源地图"
2. 启用CSS源地图"

然后刷新Chrome.

Then refresh Chrome.

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

In order to debug js and scss minified files, this tells the compiler where the source file is actually mapped.

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

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.

例如，使用角度"发生此警告，并且应在"angular.json"中将"sourceMap"设置为"true"，或者如果您不使用源贴图"并且不希望看到此警告，则以其他方式按照我的回答在浏览器中禁用它.

This warning happening for example using angular, and sourceMap should be set true in 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.

这篇关于DevTools无法解析SourceMap的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！