本文由雲+社群發表在前端，我們經常會通過
window.onerror事件來捕獲未處理的異常。假設捕獲了乙個異常，上報的堆疊是這個：
)這個堆疊，你看得出問題來嗎？我們發布到 cdn 的指令碼檔案，普遍是經過 uglifyjs 壓縮的，所以堆疊可讀性相當的差。假如有下面的乙個堆疊檢視工具，又如何？
眼尖的同學，一眼就能找到問題。這裡的p[e]出現了可能為undefined的情況。
這樣乙個工具，大大提高了問題定位的效率。
好，這裡不賣瓜，我們來看下這當中的實現原理。
一步步來說的話：
對於url，我們可以用於載入原始碼內容，得到source
source 使用 uglifyjs 反向美化成多行的**prettysource，並且同時生成sourcemap
堆疊幀中的line和col通過sourcemap反查，得到美化後對應的prettyline和prettycol
將prettysource、prettyline、prettycol給到 monaco editor 渲染，就可以得到上述截圖的效果
說那麼多，不如貼**是吧：
var result = uglifyjs.
minify
(source,
, sourcemap:})
;var code = result.code;
var rawsourcemap =
json
.parse
(result.map)
;var consumerpromise =
newsourcemap.sourcemapconsumer
(rawsourcemap)
;resolve
( consumerpromise.
then
(function
(consumer)})
);
var code = result.code;
var consumer = result.sourcemapconsumer;
var position = consumer.
generatedpositionfor()
;parent.
postmessage(}
, sourceorigin)
;
js-loader.html.zip
原始碼只包含堆疊解析的實現，ui 的實現不在本文的討論之內，用 react 隨便畫一畫就好了。
如何優雅地檢視 JS 錯誤堆疊？
本文由雲 社群發表 在前端，我們經常會通過window.onerror事件來捕獲未處理的異常。假設捕獲了乙個異常，上報的堆疊是這個 typeerror cannot read property module ofundefined at htmldivelement.dispatch at html...
如何優雅地檢視 JS 錯誤堆疊？
摘要 堆疊是debug的關鍵。在前端，我們經常會通過window.onerror事件來捕獲未處理的異常。假設捕獲了乙個異常，上報的堆疊是這個 typeerror cannot read property module of undefined at htmldivelement.dispatch a...
如何優雅地寫部落格
如何優雅地寫部落格 現在寫部落格面臨著幾個問題 編寫麻煩，大部分的部落格編輯器都很爛，csdn和等等。維護麻煩，維護多個部落格的資料同步很麻煩。歷史檢視，大部分部落格編寫都不能檢視之前的歷史資料。用github做部落格倉庫，將資料都寫在github上，這樣可以隨時檢視一年前的部落格資料，方便在原文件...