使用sourceMap文件定位小程序錯誤信息

sourceMap是什麼

在前端開發過程當中代碼不免會有錯誤，即使是再當心，也有可能出現 Cannot read property 'xxx' of null 這樣的低級失誤，debug天然是屢見不鮮。如何使用chorme的控制檯進行debug也有許多技巧，但本文的關注點不在此，不予討論。

在使用構建工具時，sourceMap相相信大多數人都見過，也知道webpack中的devtool參數能夠配置打包生成的sourceMap模式，可是不見得知道如何使用，由於這都是構建工具和瀏覽器默認自帶且默認處理的，多數人不去關注。簡單來講，sourceMap就是字面意思，源文件的映射，可以從壓縮後的js中找到源文件對應的行列，在定位錯誤的時候很是有用。

sourceMap怎麼用

npm run dev開始開發vue項目，先寫一段簡單的vue代碼

代碼內容很簡單，就是掛載組件的時候觸發斷點

這時候打開瀏覽器就會進入斷點：

再看看咱們的源碼，可以發現連代碼行數位置都是完美還原的，爲debug提供了極大的方便（極度溫馨.jpg）

可是很明顯這樣的代碼是不能跑在瀏覽器中的，那瀏覽器是怎麼作到的，查看瀏覽器下載的js文件 app.js：

可以發現這一段與咱們寫下的vue代碼基本相同，可是控制檯爲何沒有顯示在這裏debugger呢？另外在 app.js 的末尾看到這樣一行

//# sourceMappingURL=app.js.map 這行即是向控制檯指明瞭該文件對應的 sourceMap ，在報錯或debugger時控制檯會使用該sourceMap文件得到源文件及目前光標位置（不知道怎麼形容就暫時稱之爲光標吧，也就是源文件debugger的位置）

打開 app.js.map ，它其實是一個json文件，我裝了json插件才顯示成這樣，可是很明顯這東西我看不懂（攤手）

雖然我看不懂，但並不影響我用它debug，並且通常來講並不須要開發者專門配置什麼，這一切都是開箱即用的。

PS：因爲示例比較簡單且沒有壓縮轉譯，即使沒有sourceMap也同樣可以調試，可是在生產環境線上代碼進行壓縮和babel轉譯後會變得很是難以調試，這時候sourceMap便會很是有用。

使用sourceMap定位小程序報錯信息

微信小程序後臺是自帶有錯誤日誌記錄的功能，本來用的還好好的，錯誤信息中會帶出源文件的路徑，順着路徑和提示信息找便可定位錯誤。可是在爆出可以輕易得到小程序源碼的問題後小程序官方在某個版本中加入了壓縮混淆的功能（不開仍是原來的樣子可是開了安全係數更高），報錯信息便再也不有源文件的路徑了。

可是這樣我要怎麼調試呢，總不能一個一個replace去找吧，而小程序官方提供了sourceMap文件，從上面的嘗試知道sourceMap是能夠幫助定位錯誤信息的，可是具體要怎麼使用呢？

我便開啓了搜索大法，尋找使用sourceMap的辦法，發現只須要使用mozilla提供的source-map庫便可，因而簡單作了一個可以利用sourceMap和報錯行數得到源碼位置的頁面，效果是這樣的

代碼在這裏，使用html寫的，直接複製保存就能使用

總結

sourceMap開箱即用很舒服，只須要在源碼後面加一句 //# sourceMappingURL=xxx.map便可，如果沒有源碼只有錯誤信息也能夠經過source-map庫定位錯誤。至於sourceMap的具體原理待往後有時間再深刻了解（手動狗頭）。

參考連接

使用SourceMap定位問題

MDN：如何使用 source map

GITHUB：mozilla/source-map