瀏覽器控制臺 一直顯示警告 某些小潔癖的前端程序員 對此無法忍受 藍瘦香菇！！！

如圖所示：

DevTools無法加載源映射∶無法加載http:l/m.y .com:8B8/NC_103 5_blog[js/axios,.map的內容:
HTTP錯誤:狀態代碼44, net:Ee_iTPp_RESsa0isE_COE FAILURE

axios.js源碼位置 1756行 源代碼該行被注釋

什么是 Source Map

在前端開發過程中，通常我們編寫的源代碼會經過多重處理（編譯、封裝、壓縮等），最后形成產物代碼。于是在瀏覽器中調試產物代碼時，我們往往會發現代碼變得面目全非。

因此，我們需要一種在調試時將產物代碼顯示回源代碼的功能，source map 就是實現這一目標的工具。

基本原理

source-map 的基本原理是，在編譯處理的過程中，在生成產物代碼的同時生成產物代碼中被轉換的部分與源代碼中相應部分的映射關系表。有了這樣一張完整的映射表，我們就可以通過 Chrome 控制臺中的"Enable Javascript source map"來實現調試時的顯示與定位源代碼功能。

對于同一個源文件，根據不同的目標，可以生成不同效果的 source map。它們在構建速度、質量（反解代碼與源代碼的接近程度以及調試時行號列號等輔助信息的對應情況）、訪問方式（在產物文件中或是單獨生成 source map 文件）和文件大小等方面各不相同。在開發環境和生產環境下，我們對于 source map 功能的期望也有所不同：

• 在開發環境中，通常我們關注的是構建速度快，質量高，以便于提升開發效率，而不關注生成文件的大小和訪問方式。

• 在生產環境中，通常我們更關注是否需要提供線上 source map ,
  生成的文件大小和訪問方式是否會對頁面性能造成影響等，其次才是質量和構建速度。

解決方案

二者選其一

1、忽視掉這個警告

2、根據路徑找到該文件，然后刪除文件中最后的注釋即可

本次測試案例：

刪除 axios中 1756行注釋的代碼

 //# sourceMappingURL=axios.map

參考博客：

devtools 無法加載 sourcemap_【筆記】如何正確使用 SourceMap？