文件 / 二进制 / 压缩

SourceMap 解析把压缩代码的行列号还原到源码

粘贴 .map 文件（或末尾带内联 map 的 JS 文件），再输入行:列或整段报错堆栈，就能看到原始文件、行号和那几行代码。

自动解析示例：

Source Map

{
  "version": 3,
  "sources": [
    "webpack://shop/./src/format.ts",
    "webpack://shop/./src/cart.ts",
    "webpack://shop/./src/main.ts"
  ],
  "sourcesContent": [
    "export function formatPrice(value: number): string {\n  return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(value);\n}\n",
    "import { formatPrice } from './format';\n\nexport interface LineItem {\n  sku: string;\n  price: number;\n  quantity: number;\n}\n\nexport function cartTotal(items: LineItem[]): string {\n  const sum = items.reduce((acc, item) => acc + item.price * item.quantity, 0);\n  const discount = items[0].coupon.percent / 100;\n  return formatPrice(sum * (1 - discount));\n}\n",
    "import { cartTotal } from './cart';\n\nconst cart = JSON.parse(localStorage.getItem('cart') ?? '[]');\ndocument.querySelector('#total')!.textContent = cartTotal(cart);\n"
  ],
  "mappings": "MAAO,SAASA,EAAYC,EAAuB,CACjD,OAAO,IAAI,KAAK,aAAa,QAAS,CAAE,MAAO,WAAY,SAAU,KAAM,CAAC,EAAE,OAAOA,CAAK,CAC5F,CCMO,SAASC,EAAUC,EAA2B,CACnD,IAAMC,EAAMD,EAAM,OAAO,CAACE,EAAKC,IAASD,EAAMC,EAAK,MAAQA,EAAK,SAAU,CAAC,EACrEC,EAAWJ,EAAM,CAAC,EAAE,OAAO,QAAU,IAC3C,OAAOK,EAAYJ,GAAO,EAAIG,EAAS,CACzC,CCVA,IAAME,EAAO,KAAK,MAAM,aAAa,QAAQ,MAAM,GAAK,IAAI,EAC5D,SAAS,cAAc,QAAQ,EAAG,YAAcC,EAAUD,CAAI",
  "names": [
    "formatPrice",
    "value",
    "cartTotal",
    "items",
    "sum",
    "acc",
    "item",
    "discount",
    "formatPrice",
    "cart",
    "cartTotal"
  ],
  "file": "app.js"
}

生成代码位置（行:列或整段报错堆栈）

只在当前页面解析，不会去抓取远程源文件或外部 sourceMappingURL。

结果

定位源文件映射段

输入已变更，正在自动解析…

列号从 1 开始

线上监控报了一条错：app.3f2a.js:1:20931，压缩后的第 1 行第两万多列。和它一起构建出来的 .js.map 文件其实知道这是哪个 .ts 或 .vue 文件的哪一行，只是 mappings 用 Base64 VLQ 编码，肉眼读不出来。这个 SourceMap 解析工具替你完成解码和查找，不用为了定位一次报错专门写脚本引入 source-map 库。

监控平台没配 sourcemap 上传、手里只有 CI 产物，或者想确认某份 map 和线上 bundle 是不是同一次构建时，都可以用它。它也能当 SourceMap 解析器看文件本身：sources 列了哪些文件、哪些带 sourcesContent、哪些在 ignoreList 里、mappings 有没有写坏。和把 map 上传到服务器反解的监控控制台不同，这里不上传任何内容，也不会请求任何远程地址。

为什么用这个 SourceMap 解析工具

它直接回答你真正关心的「这是源码哪一行」，整段堆栈一次查完，结果不精确时也会明说。

整段堆栈粘进来，一次还原每一帧

每一行只要以 :行:列结尾，就会拿去 map 里查：原始文件、行号、列号、原始变量名，外加前后几行源码。帧所在的文件和 map 的 file 字段对不上时会单独提示，避免把 vendor 包里的帧误用业务代码的 map 去解析。

查看定位规则

左侧是压缩后的报错堆栈，右侧每一帧都被还原到原始 TypeScript 文件和行号，并高亮对应的源码行。

看清 map 里带了哪些源码，并还原出来

「源文件」视图列出 sources 的每一项（已拼接 sourceRoot），标出哪些有 sourcesContent、哪些在 ignoreList 里，点开就能带行号查看。可以单个下载，也可以把全部内嵌源码按目录结构打成 zip 下载——源码仓库丢了、只剩 js.map 文件还原源码时正好用得上。

在工具里试试

从 map 里列出的源文件清单，部分标记为缺少源码，旁边是一个带行号的已还原 TypeScript 文件和打包下载按钮。

让定位结果准确的三个细节

map 用什么形式给都行

可以粘贴 .map 的 JSON，点「打开 .map 文件」或直接拖进来，也可以粘贴构建出来的 JS/CSS 文件本身：末尾有 //# sourceMappingURL=data:… 注释时，会自动取出内联 map 解码（Base64 和 URL 编码都支持）。如果注释指向的是普通地址，只提示地址、不去抓取，请把那个 .map 文件直接打开。

服务器返回的 map 开头常带防 XSSI 的 )]}' 一行，还有 UTF-8 BOM，都会自动去掉，原样粘贴即可。

先确认列号从几开始数

位置可以写成 12:345、「12 345」，也可以是完整的堆栈帧，比如 at n (https://example.com/app.js:1:177)。列号默认从 1 开始数，因为 Chrome、Firefox 和 Node 打印的堆栈就是这样。如果列号来自 mozilla/source-map 库或其他从 0 开始的字段，请关掉「列号从 1 开始」，否则每个结果都会偏一个字符。

堆栈里没有行:列的行（比如第一行错误信息）会被跳过并计数，不会让整次查询失败。

看清命中方式，再反向查

「精确命中」表示正好有映射段从这一列开始；否则取左侧最近的映射段并在结果里注明，这和浏览器、source-map 库的默认规则一致。点「在源文件中查看」会跳到对应的原始行，原始行号框会做反查，列出所有映射回这一行的生成位置。

关闭自动解析后，在面板任意位置按 Ctrl/Cmd+Enter 即可解析并查询。

它能拆开 map 里的哪些东西

每个映射段都解码出来

「映射段」视图把 VLQ 字符串拆成一行行：生成行:列 → 源文件、原始行:列、名称，每次显示 100 条，也可以把全表导出为 TSV，方便放进表格或做 diff。

从原始行反查生成代码

选一个源文件、填一个原始行号，就能列出所有指向它的生成位置，用来确认某一行是被内联了、复制了，还是被压缩器整个删掉了。

内联、索引型与 ignoreList

支持内联 data: URL、带 sections 和 offset 的索引型 map、sourceRoot 拼接，以及 ignoreList 和旧的 x_google_ignoreList，一眼分清框架代码和自己的代码。

报错直接指到坏掉的那一段

JSON 语法错误给出行号和列号；VLQ 非法字符、字段数不对的映射段、越界的 source 或 name 索引，都会说明出在生成代码第几行第几段。

能做什么，不做什么

不抓取任何远程内容: 外部 sourceMappingURL、sources 里的 http(s) 地址、通过 URL 引用的索引型分段，都只显示、从不请求。map、其中的源码和你粘贴的堆栈只留在当前标签页，不写进 URL，也不写进本地存储。
只支持 v3，最大 50 MB: 只接受 Source Map v3，version 2 或缺少版本号的文件会直接报错。超过 50 MB 的输入会被拒绝，很大的 map 解码时页面可能短暂停顿。
只向左取最近的映射段: 某一列没有映射段起点时，结果取它左侧最近的一段并标为就近命中；列落在打包器生成的胶水代码里时，会直接说明这段没有原始位置，而不是猜一个附近的位置。
没有 sourcesContent 就没有源码: 构建时没开 sourcesContent 的 map，仍能给出原始文件路径和行列，但无法显示源码片段、预览或打包下载——原始文本根本不在文件里。
一次只对应一份 map: 一份 map 只描述它自己的 bundle。来自其他文件的帧会被标记但仍会查询，请先看提示再采信。逐段彩色的 sourcemap 可视化、编辑或合并 map 不在本工具范围内。

SourceMap 解析常见问题

怎么用 sourcemap 定位线上报错？行号列号怎么对应到源码位置？

把 .map 文件粘贴到上面的 SourceMap 解析工具里，再把报错堆栈整段粘进位置框。每个带 :行:列的帧都会还原成原始文件、行号、列号和变量名；map 带 sourcesContent 时还会显示前后几行源码。注意浏览器堆栈的列号从 1 开始，这也是默认设置。

如何从 JS 的 source map 中还原源代码？

前提是 map 里有 sourcesContent，它保存了每个源文件的完整原文。打开「源文件」视图即可逐个查看、单个下载，或把全部源码按目录结构打包成 zip。没有 sourcesContent 的 map 只记录路径和位置，源码无法从中还原。

没有自动解析平台，有没有在线的 source map 解析工具？

有，就是这个页面。它不需要注册，也不需要把 map 上传到任何平台：解码、查找和源码预览都在浏览器里完成。适合监控平台还没配 sourcemap 上传、或者只想临时查一条报错的情况。

sourcesContent 是什么？为什么能直接还原源码？

sourcesContent 是 map 里和 sources 一一对应的数组，每一项是该源文件的完整原文。构建工具默认会把它写进去，好让调试器不必再去请求源文件，所以拿到 map 就等于拿到了源码。某一项为 null 时，本工具会把那个文件标成「无源码」。

线上要不要带 sourcemap？会不会暴露源码？

会。公开可访问、又带 sourcesContent 的 map 能让任何人读到你的原始代码和注释，所以很多团队只把 map 上传给监控平台，或放在需要鉴权的地址。在这里检查 map 不会增加暴露：解析全在本地，粘贴的内容不会离开浏览器。

没找到答案？

现在就用 SourceMap 解析工具定位报错

把最近一次构建的 .map 文件拖进来，贴上报错堆栈，SourceMap 解析几秒内就能告诉你是源码哪一行出了问题。

返回工具浏览全部工具

全部处理都在浏览器本地完成。