本文由云+社区发布在前端。我们经常使用window.onerror事件来捕获未处理的异常。假设捕获到异常，报告的堆栈是这样的：TypeError:Cannotreadproperty'module'ofundefinedatObject.exec(https://my.cdn.com/dest/app.efe91e855d7432e402545e7d6c25d2d9.js:16:29828)在HTMLLIElement.<匿名>(https://my.cdn.com/dest/app.efe91e855d7432e402545e7d6c25d2d9.js:25:6409)8:1:248887)atHTMLDivElement.y.handle(https://my.cdn.com/dest/vendor.eb28ded1876760b8e90973c9f4813a2c.js:1:245631)这个堆栈，你能看出问题所在吗？我们发布到CDN的脚本文件一般都是经过UglifyJS压缩的，所以栈的可读性比较差。如果有像下面这样的堆栈查看工具呢？堆栈查看工具眼尖的同学一眼就能发现问题。这里p[e]可能未定义。这样的工具大大提高了问题定位的效率。好了，我这里不卖瓜了，来看看实现原理吧。stack工具的实现原理一步步讲解：获取原始stack字符串，使用error-stack-parser解析成stackframe，每个stackframe包含三个最重要的字段：url-源的URL地址codeline-stacklocation行号col-stackpositioncolumnnumber对于url，我们可以通过它来加载源码内容，获取sourcesource使用UglifyJs反向美化成多行代码prettysource，生成sourcemap栈中的line和colframe同时通过sourcemap查回来得到美化后对应的prettyline和prettycol将prettysource、prettyline、prettycol交给MonacoEditor进行渲染，就可以得到如上截图的效果。说了这么多，干嘛不贴代码：varresult=UglifyJS.minify(source,{output:{beautify:true},sourceMap:{filename:'pretty.js',url:'pretty.js.map'}});varcode=result.code;varrawSourceMap=JSON.parse(result.map);varconsumerPromise=newsourceMap.SourceMapConsumer(rawSourceMap);resolve(consumerPromise.then(function(consumer){return{code:code,sourceMapConsumer:消费者}}));以上就是使用UglifyJs反向美化压缩代码的核心代码。SourceMap的源码如下：varcode=result.code;varconsumer=result.sourceMapConsumer;varposition=consumer.generatedPositionFor({source:'0',line:lineNumber,column:columnNumber});parent.postMessage({event:'js-prettify-callback',payload:{hash:payload.hash,result:'success',prettySource:code,prettyLineNumber:position.line,prettyColumnNumber:position.column+1}},来源）；完整对源码感兴趣的读者也可以下载玩一下：js-loader.html.zip的源码只包含了栈解析的实现，UI的实现不在本文的讨论范围内。只需用React画一幅画。本文已获作者授权腾讯云+社区多渠道发布获取更多新鲜技术干货，可以关注我们的腾讯云技术社区-云家社区公众号和知乎代理号
