DevTools 解析 SourceMap 失敗

Question

我試圖讓我的 Webpack 項目有一個源映射文件。

我終於得到了正確的設置，以便它可以做到這一點，但現在我收到了這個錯誤：

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

我轉到它指出的 URL，我找到了一個具有以下屬性的 json 文件：

• 版本- 設置為 3
• 源- 很長的字符串數組，似乎是我文件的 webpack 路徑。
• 名稱- 很長的字符串數組，似乎是隨機變量和函數。
• 映射- 一長串看似隨機的大寫字母和逗號。
• 文件- 設置為 bundle.js
• sourcesContent - 非常長的字符串數組（超過 1000 萬個字符）。 我所有的源代碼。
• sourceRoot - 設置為空字符串

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

Answer 1

這不是這個問題的答案，但我相信我的回答可以幫助一些人。

這是由於 chrome 的設置，例如在 FF 中不會發生此錯誤警告。 要修復它，請轉到 Chrome 的開發人員工具設置，然后取消選中：

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

然后刷新 Chrome。

為了調試js和scss縮小文件，這會告訴編譯器源文件實際映射到的位置。

使用最新版本的 Webpack 源映射運行良好，我嘗試重現此錯誤，但無法運行項目，我看不出問題作者有什么問題。

例如，使用 angular 發生此警告，並且sourceMap應在angular.json設置為true ，或者如果您不使用 source-map'ing' 並且您不希望看到此警告在瀏覽器中按照我的回答禁用它.

Answer 2

根據經驗，我不希望客戶告訴您為什么它無法解析 SourceMap（盡管那會很好）。 我遇到了一些工具無法解析大型源映射（可能是內存限制）的問題，並且考慮到您的資產規模很大，我會先看一下。

Webpack 支持devtool配置字段的幾種不同值，其中一些值不如默認值那么忠實。 例如，您是否嘗試過'cheap-module-source-map' ？ 僅獲取行號（無列）對於可用的源映射 IMO 來說是一個很好的權衡。

但是減少資產規模可能會更好地為您服務。 Webpack 的代碼拆分和“塊”管理選項使得將代碼拆分為多個文件並在運行時異步加載變得非常簡單。 在這種情況下，您將有兩個或多個 JS 文件，每個文件都有自己的源映射，因此瀏覽器將不再因嘗試處理一個大文件而卡住。

Answer 3

就我而言，我必須禁用Adblock才能消除錯誤。

Answer 4

某些chrome 擴展可能會干擾 DevTools。

也許，您可以嘗試禁用特定應用程序不需要的應用程序，看看是否“解決”了問題。

以上是對我有用的方法，但我不確定為什么會這樣。