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的具體原理待日后有時間再深入了解（手動狗頭）。