UD5工具箱
使用教程
本教程将详细介绍如何使用 错误堆栈追踪解析器 来解析和还原压缩代码的错误堆栈追踪信息。请按照以下步骤操作，快速定位和解决生产环境中的代码错误。
第一步：获取错误堆栈追踪
当应用程序在浏览器控制台中抛出错误时，展开错误信息即可看到完整的堆栈追踪。您可以直接从浏览器控制台中复制堆栈追踪文本。Chrome 浏览器的堆栈以 "at" 开头，Firefox 的堆栈包含 "@" 符号分隔的函数名和位置信息，Safari 的堆栈格式与 Firefox 类似。对于 Node.js 应用，错误堆栈通常作为 Error 对象的 stack 属性值输出。复制堆栈信息时请确保包含完整的多行内容，不要遗漏任何调用帧。
第二步：粘贴堆栈信息到工具
将复制的堆栈追踪文本粘贴到工具页面的「堆栈追踪」输入区域。工具会自动检测堆栈格式类型（Chrome/Firefox/Safari/Node.js），并在界面上方显示检测到的格式标识。粘贴后，您可以直接点击「解析」按钮查看基本的解析结果，此时工具会使用堆栈中的原始文件路径和行列号信息进行解析。
第三步：加载 Source Map
如果堆栈中的文件路径指向的是压缩后的代码（如 bundle.min.js），您需要加载对应的 Source Map 文件来还原原始位置。工具提供了三种加载方式：(1) 在「Source Map URL」输入框中填入 .map 文件的在线地址；(2) 在「Source Map JSON」文本区域中粘贴 .map 文件的 JSON 内容；(3) 将本地的 .map 文件直接拖拽到上传区域。加载 Source Map 后，工具会自动重新解析堆栈信息，将压缩代码的位置映射到原始源代码位置。
第四步：查看解析结果
解析完成后，在「解析结果」区域会显示一个结构化的表格，包含函数名、文件路径、行号、列号和原始位置等信息。您可以逐一查看每个调用帧的详细信息，快速定位错误发生的准确位置。如果某些调用帧无法通过 Source Map 映射（如第三方库或未提供 Source Map 的代码），对应的原始位置列会显示原始的压缩代码位置信息。表格下方的统计信息会告知您映射成功的比例。
第五步：复制或导出结果
找到关键的错误位置后，您可以点击「复制结果」按钮将解析结果保存到剪贴板，方便在代码编辑器或问题追踪系统中使用。如果需要保存完整的解析数据，可以点击「导出 JSON」按钮下载一个包含所有解析信息的 JSON 文件。该文件可以集成到团队的错误监控流程中，用于自动化错误分析和追踪。
进阶：使用 VLQ 解码器
如果您对 Source Map 的内部数据结构感兴趣，可以使用工具内置的 VLQ 解码器来手动解析 Source Map 中的编码数据。在 VLQ 解码器输入框中粘贴 Source Map mappings 字段中的 Base64-VLQ 编码字符串，工具会解码并展示每个编码值的含义。这对于深入理解 Source Map 的映射机制和排查特殊的映射问题非常有帮助。
通过以上步骤，您可以快速将生产环境中压缩代码的错误堆栈还原为原始源代码的准确位置，大幅提升线上问题的排查效率。建议在项目构建时始终保留 Source Map 文件（不对外公开），以便在需要时能够进行堆栈还原。