2017-05-30 355 views
8

我想讓我的Webpack項目有一個源映射文件。DevTools無法解析SourceMap

我終於得到了設置正確,這樣它會做到這一點,但現在我得到這個錯誤:

DevTools failed to parse SourceMap: http://MyServer/MyApp/bundle.js.map

我去URL它規定,我覺得這些屬性的JSON文件:

  • - 設置爲3個
  • 來源 - 字符串很長的陣列,似乎是的WebPack路徑我的文件。
  • 名稱 - 非常長的字符串數組,似乎是隨機變量和函數。
  • 映射 - 很長的一串看似隨機的國會大廈信件和逗號。
  • 文件 - 設置爲bundle.js
  • sourcesContent - 字符串(超過1000萬字)的非常非常長的陣列。我所有的源代碼。
  • sourceRoot - 設置爲空字符串

這一切似乎是有效的JSON。不幸的是,Chrome沒有給出爲什麼它無法解析源地圖的原因。

有沒有讓Chrome瀏覽器說出爲什麼解析源圖失敗的方法?

或者,否則,有沒有人知道爲什麼我的源地圖會失敗?(我的代碼是這樣過大後,但這裏是我的webpack.config.js和我package.json文件。)

注:

  • 我曾與2.2.1的WebPack,2.3.2的WebPack和的WebPack試過這種2.6.1。
  • 源地圖在IE 11和Firefox中正常工作。
  • 如果我內聯我的源地圖,那麼它們在Chrome DevTools中運行良好,但是我的bundle.js從3 MB(已經太大)變爲16 MB(WAY太大)。
  • 我設置了「啓用JavaScript源地圖」(也是CSS)。
  • 我嘗試過使用Chrome Canary,但它有同樣的問題。
  • 我在IIS中託管。

回答

3

Chrome最近在開發人員工具中添加了對源地圖的支持。如果您在設置開始的Chrome開發者工具欄上,你可以看到以下兩個選項

和源

enter image description here

殘疾人Enable javaScript source mapEnable CSS Source maps ..

如果禁用這兩個選項,並刷新瀏覽器,它不應再要求源地圖。