生產環境沒有source-map檔案，上報的錯誤都不好定位，這裡實現一個簡單的錯誤定位指令碼
1、獲取壓縮程式碼錯誤資訊（行數、列數、錯誤資訊，錯誤檔案）
這裡通過控制檯看錯誤資訊
window.addEventListener('error', function (e) {
console.debug('lineno: ', e.lineno, ' colno: ', e.colno)
console.debug('errorMessage:', e.message)
console.debug('errorFile:', e.filename)
}, true)
複製程式碼我們寫一段錯誤的程式碼（single.vue的片段）
method: {
test (option) {
const data = option.test
const dataTest = option.data.test
return data + dataTest
}
},
created () {
// 設定非同步錯誤的原因是，同步的錯誤會被vue捕獲
setTimeout(() => {
this.test({
testOption: 1
})
}, 300)
}
複製程式碼在瀏覽器中執行，報錯結果如下
得到錯誤資訊：
-
錯誤行數：1
-
錯誤列數：59236
-
錯誤資訊：cannot read property 'test' of undefined
-
錯誤檔案：0.0a77f.js
2、定位錯誤的node指令碼
安裝依賴source-map
npm install source-map
複製程式碼node指令碼如下（map/index.js）
// 讀取檔案
var fs = require('fs')
// souceMap處理檔案
var SourceMapConsumer = require('source-map').SourceMapConsumer
// 啟動構建程式（已構建則不需要）
var exec = require('child_process').exec
var lineno = process.argv[2] || 0 // 第一個引數為行數
var columnno = process.argv[3] || 0 // 第二個引數為列數
var fileName = process.argv[4] || '' // 第三個引數為錯誤檔案（錯誤檔名就好）
// 構建有map的線上程式碼
// node build onlineMap為構建命令
exec('node build onlineMap', function () {
// 讀取錯誤檔案的map檔案
var consumer = new SourceMapConsumer(fs.readFileSync('./dist/' + fileName + '.map', 'utf8'))
// 輸出map的錯誤資訊
console.log(consumer.originalPositionFor({
line: +lineno, // +是為了轉化為數字
column: +columnno
}))
})
複製程式碼執行node指令碼
node map 1 59236 0.0a77f.js
複製程式碼效果如下：
結合控制檯輸出的資訊，就可以定位到錯誤程式碼了
我們再來看一下，給程式碼開啟source-map，看錯誤資訊是否一致
3、後續擴充套件思路
目前實現的是比較簡單的指令碼，所以存在一些問題：
- 需要當前構建內容和線上是一致的
- 操作比較繁瑣
優化思路如下：
後續優化慢慢補充~