解決Failed to parse SourceMap: http:xxx 問題

一、總結

一句話總結：

直接在chrome瀏覽器中簡單粗暴關閉掉js source maps（按f12進入控制台，然后再按f1進入setting），問題可以解決，更加好的方法是查看控制台的錯誤提示，找到錯誤來源，比如我當前的錯誤來源就是chrome上面的廣告攔截插件adblock的問題

1、source map是什么？

SourceMap就是如何把壓縮后的js代碼映射成格式化代碼的方法

2、source map出現的原因是什么？

壓縮js或css加快網站速度，壓縮之后不便調試，source map就是如何把壓縮后的js代碼映射成格式化代碼的方法

在現在寫網站的時候，如果有很多的javascript文件，拿ASP.NET NVC來說，在渲染內容到客戶端瀏覽器的時候，如果你使用一些Bundle類的話，能夠合並並且壓縮那些js文件，並且去除其中的空格等元素，從而減小文件的容量，提高網頁的反應速度。但是這樣一樣造成的問題就是在瀏覽器端無法對js文件進行調試，因為進過壓縮的文件很緊湊，沒有空格與換行。

3、chrome瀏覽器中如何設置js的SourceMap？

按f12進入控制台，然后再按f1進入setting，然后就可以看到設置js和css的source map

4、source map工作原理？

在對已有的js文件進行壓縮時，壓縮的同時會產生相應的sourcemap文件，通過source map文件可以將壓縮的js還原。現在最常用的是Closure compiler，在工具產生壓縮js文件之后，會在文件頭部加上這樣一行代碼，指明了服務器上的哪個文件是map文件。

二、解決Failed to parse SourceMap: http:xxx 問題

轉自或參考：解決Failed to parse SourceMap: http:xxx 問題_網絡_寫代碼的蝸牛-CSDN博客
https://blog.csdn.net/sundacheng1989/article/details/51118865

最近在調試web網站的時候，看到Chrome的Dev Tool的控制台打印出來一個莫名的錯誤，類似於Failed to parse SourceMap: http:xxx的提示。感覺這應該不是javascript代碼出的問題，於是Google一下，發現里面大有文章。

這里簡單說一下SourceMap這項技術。在現在寫網站的時候，如果有很多的javascript文件，拿ASP.NET NVC來說，在渲染內容到客戶端瀏覽器的時候，如果你使用一些Bundle類的話，能夠合並並且壓縮那些js文件，並且去除其中的空格等元素，從而減小文件的容量，提高網頁的反應速度。但是這樣一樣造成的問題就是在瀏覽器端無法對js文件進行調試，因為進過壓縮的文件很緊湊，沒有空格與換行。

這里先說一個額外的話題，就是怎么把壓縮后的js文件還原成格式化的代碼。這里有一個在線的工具就可以完成。http://jsbeautifier.org/，打開網址后，輸入壓縮后的js代碼，然后點擊Ctrl+Enter，自動就給你格式化了，很方便。

上邊說到的是如何格式化，就是把代碼拷貝出來進行格式化，跟調試還不一樣。想在調試的時候能在瀏覽器端顯示格式化的js代碼，這里就引入了SourceMap的概念。

概括來講，SourceMap就是如何把壓縮后的js代碼映射成格式化代碼的方法。當你在Production環境部署代碼的時候，伴隨着壓縮與優化話的js代碼，還要有一個包含原始js代碼的sourcemap文件。當客戶端瀏覽器Chrome在收到這個壓縮后的js文件后，它會自動的去尋找服務器上相關的sourcmap文件並把壓縮的js代碼轉換成格式規范的js代碼。

Chrome要實現這個功能，首先要開啟這個設置。在Dev Tool的設置框中，勾選相應的項。注意，不是Chrome的設置頁面，是DevTool的設置頁面。

按f12打開控制台，然后按f1即可進入

這里來說一說SourceMap到底是怎么工作的。首先我們要有相應的工具對已有的js文件進行壓縮，壓縮的同時會產生相應的sourcemap文件，然后再部署到服務器就可以了。目前不是所有的壓縮工具都符合要求，比如說ASP.NET MVC里邊的那個Bundle類就不可以。現在最常用的是Closure compiler，在工具產生壓縮js文件之后，會在文件頭部加上這樣一行代碼，指明了服務器上的哪個文件是map文件。這個文件只有在瀏覽器打開了上邊提到的DevTool里邊SourceMap的設置，才會下載到本地，否則不會下載。這里就顯示出了其優勢，一般用戶不用下載，其網頁只用優化后的js文件，響應速度快。對於開發者，發者可以下載map文件進行調試。