在線追踪壓縮後的JS出錯代碼
原文首發： https://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文件在同一個目錄下，可以不填
map文件名：相比於js文件，map文件的格式，比如[name].[hash].js.map,[name].js.map。有點類似webpack配置的output下filename的格式
map加密密鑰：如果map文件放到跟js同目錄下，一起發佈到cdn上，處於安全考慮，可以使用對稱性加密map文件,加密包使用encrypte ,如果沒有加密，這項不填
錯誤訊息:通過window.onerror等方式獲取到的錯誤訊息，一般可以通過error.stack來獲取,只需copy錯誤訊息，黏貼到界面上就行
運行結果
單擊分析按鈕後，就會對你配置的訊息就行檢索和分析，最終得到如下分析結果
默認顯示最頂層的堆棧出錯
可以單擊其他堆棧的行，進行源代碼查看，非常的直觀
注意
因為一般js文件的地址跟html地址都不一樣，所以為了得到error訊息，需要對js文件允許跨域，在script標籤裡面加crossorigin屬性
總結
一般公司裡面都有線上js出錯的日誌上報，通過線上日誌的上報，查看錯誤訊息，把錯誤訊息copy到工具上面，進行查看。根據這個工具，可以對線上的錯誤進行源代碼的查看了，幫助大家快速找到線上問題