能否构建Source Map实现调试时hover input.js的a显示t.a的值？

我正在开发一款JS代码转换器，示例如下：

输入代码（input.js）：

let a=5
let b=6
const result = a + b;
console.log(result)

转换后输出代码（output.js）：

const t={}
t.a=5
t.b=6
t.result = t.a + t.b;
console.log(t.result)

目前已通过Source Map实现了在Chrome DevTools中调试时显示input.js的功能，但hover input.js中的变量a时，无法看到output.js中对应的t.a的值。请问能否构建这样的Source Map，实现原变量到转换后对象属性的取值映射？

可以实现，核心是在生成Source Map时，为原变量和转换后的对象属性建立精准的变量级映射关系，而不只是行/列的代码位置映射。

关键实现步骤： #

• 跟踪变量到属性的映射关系：在代码转换的AST遍历阶段，记录每个原变量（如a）对应的转换后属性路径（t.a）。比如遇到let a = 5时，标记该变量后续所有引用都对应t.a。
• 生成带变量映射的Source Map：
  1. 使用Source Map生成库（如Node.js的source-map包）时，为输出代码中每个t.a的定义和引用位置，关联原代码中a的对应位置信息。
  2. 确保Source Map的names数组包含原变量名（a、b、result），并通过mappings字段中的变量映射条目，将原变量的定义/引用与转换后的属性操作绑定。
• 覆盖所有变量场景：针对变量的定义（let a=5）、引用（a + b）等所有出现位置，都要建立对应的映射，这样DevTools在hover时才能准确找到对应的t.a值。

验证方式： #

生成包含变量映射的Source Map后，在Chrome DevTools中加载output.js和对应的Source Map，调试时hover input.js中的a，DevTools会通过Source Map关联到t.a，并显示其当前值。

如果手动编写Source Map过于繁琐，可以借助AST转换工具（如Babel插件、Esprima）来自动跟踪变量映射，简化Source Map的生成过程。

内容的提问来源于stack exchange，提问作者yigal