DevTools · SourceMap Decoder — 全部解析在浏览器本地完成,map 文件不上传

SourceMap 还原解析器

把 .map 文件 JSON 粘贴进来,再输入线上报错的 行:列(浏览器堆栈里的位置),本页用 Base64 VLQ 真实解码 mappings 段表,还原到原始源码文件、行列与变量名,并展示全部映射段供排查。

输入

支持标准 v3 sourcemap(含 sources / names / mappings 字段)。

报错位置(生成文件中的 行:列,与浏览器堆栈一致,从 1 开始)

还原结果

等待解析:左侧粘贴 map 并输入行列。
mappings 段表(前 60 段,命中行高亮)
生成行生成列源文件源行源列变量
sources 源文件清单
  • —

批量定位 · 映射密度图 · CSV 导出

一次粘贴多行报错位置或整段错误堆栈,自动提取「行:列」逐条还原,并把结果导出 CSV 归档到监控平台。

报错位置(每行一个 行:列,也可直接粘贴堆栈,最多 300 条)

堆栈行自动取首个「行:列」;同一份 map 内重复位置会重复列出,便于逐条核对。

映射密度分布(按生成行统计段数,粉色为本次命中行)
生成位置源文件源位置变量状态
粘贴多行报错位置并点击「批量定位」,即可得到逐条还原结果与 CSV。

方案管理 · 数值对比 · 导出

调好的参数可存成方案随时载入,也能生成可分享链接;结果里的数值列会自动画成对比图,并支持导出 CSV / JSON。

最近方案 暂无

🗺️口径说明与常见误填

粘贴 map 与报错行列,还原到源码位置

两样输入
粘贴 .map 的 JSON 加报错行:列,两个输入就够。
VLQ 解码
按 Base64 VLQ 逐段解出段表,定位源文件、行、列与变量名。
段表与清单
解码段表全量可查,sources 与 sourcesContent 分标签页浏览。
复制结果
还原位置一键复制,直接拿去改代码。
本地解析
解码全在浏览器完成,线上报错内容不外传。

这个工具解决什么问题

线上压缩后的代码全挤在一行,报错只给你一个压缩行:列。本工具粘贴对应版本的 source map 文件与报错位置,用 Base64 VLQ 解码遍历段表,直接还原出源文件、行列号甚至变量名,还有段表与 sources 清单可查,告别对着压缩代码猜。

三条使用守则

① 每个发布都留 map:map 必须与线上 bundle 同一次构建产物,按发布标签归档,出错才找得到对的版本。

② map 别放公网目录:被引用的 map 谁都能下载,等于公开源码;用 hidden-source-map 只传错误监控平台。

③ 行列取自报错栈:输入的是压缩文件的行:列,不是源码行号;浏览器控制台报错栈里直接抄。

怎么用

  1. 第 1 步 · 粘贴 map 内容
    打开对应版本的 .map 文件,整段 JSON 复制进输入框。
  2. 第 2 步 · 填报错位置
    把错误栈里的压缩行:列填入定位框。
  3. 第 3 步 · 点击解析
    查看还原出的源文件、行列与变量名映射。
  4. 第 4 步 · 复制去修复
    复制结果位置,回源码上下文确认并修复。

更新记录

  • v1.0 2026-11-02
  • 2026-11-02 上线首个版本
  • 2026-11-02 新增变量名还原与 sourcesContent 浏览

常见问题

怎么还原线上报错位置?
从浏览器错误栈找到压缩文件的行:列,把与该发布版本配对的 .map 文件内容和这个位置一起粘贴到本页,点击解析即得源文件、行列与变量名。
sourcemap 定位分几步?
三步:先按发布标签锁定配对 map 文件,再输入压缩行:列由 VLQ 段表解码定位,最后在 sources 清单里打开源文件核对上下文。本页覆盖后两步。
source map 泄露有什么风险?
map 里可能带完整源码文本,放在公网目录等于把业务逻辑、内部接口甚至注释里的敏感信息全部公开。生产建议 hidden-source-map 只上传监控平台,或把 map 放到需要鉴权的内网。
在线解析工具怎么用?
两个输入:粘贴 .map 的完整 JSON,填报错行:列,点解析。段表标签可查全部解码映射,sources 标签可点看源码文本,结果可复制。
webpack 怎么配置生成 map?
生产环境推荐 hidden-source-map(生成但产物里不引用)或 nosources-source-map(不含源码文本);开发用 cheap-module-source-map 够快。Vite 用 build.sourcemap 开关。生成后按版本归档再配合本页使用。

💬 留言板 0

全部留言需审核通过后展示
💬

还没有留言,来抢沙发吧!

✍️ 说点什么
0 / 500
图形验证码
👣 做完这一步,顺便看看
🏛️ 凯撒密码解密 凯撒密码解密 :1~25 位位移加解密、ROT13 一键转换… → 🔤 乱码转换器在线修复 乱码转换器在线 :把“锟斤拷”“�”“涓枃”“😀”等乱… → 📸 代码截图美化工具 在线代码转图片工具:粘贴或输入代码(支持 JavaScrip… → 🎨 WCAG 对比度检测工具 在线颜色对比度检测工具:输入前景文字色与背景色(支持 #he… →
全部工具 →