Source Map 浏览器

Source Map 实际记录了什么

.map 文件并不包含你的原始代码。它几乎总是只记录一件事：一张紧凑的位置对照表——"生成后第 2 行第 4110 列，来自 app.js 第 88 行第 12 列，那里的标识符名为 total"。有些映射文件会更进一步，把原始文件的完整文本也一并嵌入（sourcesContent），但这个字段是可选的，许多生产环境的映射文件——包括恰好是 jQuery 自己的映射文件——都是不带它发布的。

本工具在你的浏览器中直接读取这张对照表，让你能够对照真实情况进行核实，而不是仅凭构建工具的一面之词。

你可以在这里做什么

• 加载一个 .map 文件。 你会立即看到它列出的每一个原始源码路径，以树形结构展示，以及该文件包含的映射条目数量。
• 添加它所描述的生成后 .js 文件（可选，但值得一做）。 有了它，行列查询还会显示所查询位置周围的确切生成代码，点击代码片段中的某一行会自动填入行号字段。
• 查询任意生成位置。 行号从 1 开始，列号从 0 开始，这与 source map 规范的定义完全一致——也是 Chrome DevTools 及所有 JS 工具内部使用的约定。并非打包结果中的每个字节都有映射：运行时胶水代码、模块包装样板代码，以及词元之间的压缩输出，往往完全没有映射，本工具会明确说明这一点，而不是猜测。
• 在有内容时阅读原始源码。 点击树中的任意文件即可查看其嵌入的 sourcesContent。当某个源码没有嵌入文本时——映射存在，但文本不存在——你会看到明确的提示，而不是一个假装无内容可显示的空白面板。

为什么这很重要

Source map 正是把指向 bundle.min.js:2:184031 的错误堆栈，转换成指向 src/components/Cart.jsx:41 的关键所在。当这种转换看起来不对劲——错误报告在一个毫无意义的行号上，调试器进入了错误的文件——最快弄清楚是映射文件出了问题，还是自己的判断出了问题的方法，就是直接询问映射文件本身。这正是本工具所做的事。

隐私

两个文件都完全在你的浏览器中解析处理，不会上传到任何地方。