跳到正文

Source Map 还原

Source Map Resolver

用你提供的 source map,把压缩后的堆栈信息映射回原始文件和行号。

接受一份来自压缩包的堆栈跟踪和一个 `.map` 文件,告诉你每一帧来自哪个原始源文件的哪一行。一切都在标签页里解码——map 和堆栈(后者常常带着你的内部路径)都不会去往任何地方。

🔒 完全在你的浏览器里运行sourcemapdebugstacktracejavascript

Source map(.map)

把 .map 文件拖进来

在这个标签页里读取,什么都不会上传。

压缩后的堆栈

Source Map v3 在这个标签页里解码:base64-VLQ 映射、和开发者工具一样的“取前面最大列”查找,还有从 names 表里还原出来的原始名称。只有当 map 内嵌了 sourcesContent 时才会出现原始源码行——没有它的 map 只知道位置,不知道代码。解析不了的帧行原样输出。

怎么用

  1. 拿到 map

    要么是 `.map` 文件本身,要么是包底部 `sourceMappingURL` 注释里的 `data:` URI。两种都能粘到这里。

  2. 粘贴堆栈跟踪

    直接从错误报告里拿——整个,包括 `Error:` 那一行。解析不了的帧原样通过,而不是消失。

  3. 读原始位置

    每一帧得到它的源文件、行、列,以及——map 的 `names` 表里有的话——原始函数名。一个按钮复制整个还原后的堆栈。

常见问题

为什么没有显示源码行?

因为 map 没有内嵌 `sourcesContent`。没有它的 map 知道东西在哪里,不知道那里写的是什么——map 下方的统计会说你的有没有。想要代码的话,用 `sourcemap: true` 而不是只带路径的设置来构建。

有一帧说「此位置没有映射」。

那一帧的列落在任何映射段之外。通常意味着 map 对应的是这个文件的另一次构建,而不是抛错的那次——一次部署发了新代码却带着旧 map,或者 CDN 在提供缓存的包。

把生产环境的 source map 粘到这里安全吗?

什么都不会离开标签页——VLQ 解码和查找都在你的浏览器里完成。值得记住的是,带 `sourcesContent` 的 map 包含你全部的原始源码,所以一般来说你把它粘到哪里是要紧的,尽管在这里不要紧。

它读哪个版本的 source map?

v3,也是唯一有人在输出的版本。索引 map——超大包用的 `sections` 形式——不支持;改为喂给它覆盖你那一帧的分段 map。

可以从这些接进来

接下来

这些工具吃得下当前工具的产出,结果可以直接送过去。