原文:qianduan.group. 目前的web靜態資源為了減少載入時間和一部分的安全原因,都對js檔案進行了合併和壓縮，雖然在網頁體驗上非常不錯，但是對於線上js的錯誤跟蹤就顯得異常麻煩
解決思路
對於不要壓縮，這點肯定是不能妥協的，使用者體驗是堅決不能犧牲的，但是能不能從壓縮著手呢？答案是肯定的，第一時間，我們應該就會想到sourcemap，在sourcemap上來解決問題
怎麼利用sourcemap
深入瞭解sourcemap對映原理前，最好讀一下阮老師的文章《JavaScript Source Map 詳解》。 讀完之後，我們就大致瞭解了sourcemap的幾個概念，接下來我們具體分析一下
1. sourcemap檔案結構
{
version : 3,
file: "out.js",
sourceRoot : "",
sources: ["foo.js", "bar.js"],
names: ["src", "maps", "are", "fun"],
mappings: "AAgBC,SAAQ,CAAEA"
}複製程式碼mappings裡面的資料就是對應位置的對映，需要對mappings裡面的各個位置進行分解
2. 分析位置
我們使用vlq庫進行分解，獲取具體的位置資訊
/*
* 返回相應的位置資訊
* rt[0]:這個位置在（轉換後的程式碼的）的第幾列。
* rt[1]:這個位置屬於sources屬性中的哪一個檔案。
* rt[2]:表示這個位置屬於轉換前程式碼的第幾行。
* rt[3]:表示這個位置屬於轉換前程式碼的第幾列。
* rt[4]:表示這個位置屬於names屬性中的哪一個變數。
*/
let rt = vlq.decode( `AAgBC` );複製程式碼3. 記錄完整的對映關係
對於第二步，只是知道每個點位的位置，然後對於全部位置的記錄，需要關聯整理，可以參考sourcemap-stack庫，其中/src/mappingRealPath.js檔案下面的mappingSingleFile函式記錄關聯了全部資訊，以便後續使用
4.注意點
根據不同的環境，可能在計算中會有小偏差，所以我們需要修正相應的位置對映。在sourcemap-stack中，/src/mappingRealPath.js檔案下面的mapErrorPosition函式進行了位置修正，以便正確獲取
怎麼產生sourcemap
- 如果目前在使用react，vue等框架時，一般都會用到webpack，在webpack打包的時候，是可以生產map檔案的
- 如果是老式專案，一般會用到gulp等工具，這些工具在處理壓縮js檔案時，也是可以生產map檔案
使用工具
下面兩種途徑，只是提供了介面，對映關係都是依賴sourcemap-stack
- 目前可以通過sourcemap-site，git clone下來之後，執行就能開啟頁面(不再維護)
- 安裝下載vide編輯器，目前已經支援微信和支付寶小程式，也支援vue，react等開發，可以安裝vide-plugin-toolbar-sourcemap外掛，非常的方便
執行介面
引數說明
| 屬性 | 說明 | 型別 |
|---|---|---|
| map地址 | js檔案對應map檔案資源的伺服器地址，如果map檔案和js檔案在同一個目錄下，可以不填 | String |
| map檔名 | 相比於js檔案，map檔案的格式，比如[name].[hash].js.map,[name].js.map。有點類似webpack配置的output下filename的格式 | String |
| map加密金鑰 | 如果map檔案放到跟js同目錄下，一起釋出到cdn上，處於安全考慮，可以使用對稱性加密map檔案,加密包使用encrypte,如果沒有加密，這項不填 | String |
| 錯誤資訊 | 通過window.onerror等方式獲取到的錯誤資訊，一般可以通過error.stack來獲取,只需copy錯誤資訊，黏貼到介面上就行 | String |
執行結果
單擊分析按鈕後，就會對你配置的資訊就行檢索和分析，最終得到如下分析結果
預設顯示最頂層的堆疊出錯
可以單擊其他堆疊的行，進行原始碼檢視，非常的直觀
注意
因為一般js檔案的地址跟html地址都不一樣，所以為了得到error資訊，需要對js檔案允許跨域，在script標籤裡面加crossorigin屬性
總結
一般公司裡面都有線上js出錯的日誌上報，通過線上日誌的上報，檢視錯誤資訊，把錯誤資訊copy到工具上面，進行檢視。根據這個工具，可以對線上的錯誤進行原始碼的檢視了，幫助大家快速找到線上問題