如何优雅地查看 JS 错误堆栈？

优雅地查看 JavaScript 错误堆栈，可以通过以下步骤实现：

捕获错误堆栈：通过 window.onerror 事件捕获未处理的异常，并获取原始堆栈字符串。
解析堆栈帧：使用 error-stack-parser 等工具将原始堆栈字符串解析为堆栈帧，每个堆栈帧包含 url（源码的 URL 地址）、line（堆栈位置行号）和 col（堆栈位置列号）等关键信息。
加载源码：根据堆栈帧中的 url 加载对应的源码内容，得到 source。
反向美化源码：使用 UglifyJS 对压缩后的源码进行反向美化，生成多行的可读代码 prettysource，并同时生成 sourcemap。
反查堆栈位置：利用 sourcemap 将堆栈帧中的 line 和 col 反查到美化后代码中的对应位置，得到 prettyline 和 prettycol。
渲染堆栈信息：将美化后的源码 prettysource、反查得到的行号 prettyline 和列号 prettycol 传递给代码编辑器（如 Monaco Editor）进行渲染，以直观展示错误位置。

通过上述步骤，可以有效地将压缩后的 JavaScript 错误堆栈转换为易于阅读和调试的格式，大大提高问题定位的效率。

热门标签