调试时变量sumarioPessoaTemp可视化内容丢失问题咨询

问题描述 #

将表单数组的原始值赋值给sumarioPessoaTemp变量后，调试初期悬浮查看能看到变量内容，但后续调试步骤中该变量内容无法显示。程序实际运行无异常，且该现象并非仅出现于当前场景。

相关代码片段：

let sumarioPessoaTemp: SumarioPessoa[] = this.SumarioPessoaFormArray.getRawValue() as SumarioPessoa[];

// select column values from array
let maiorOrdem: number = 0;
if (sumarioPessoaTemp != null && sumarioPessoaTemp.length > 0) {
  let ordem = sumarioPessoaTemp.map((t) => t.ordem);
  maiorOrdem = Math.max(...ordem);
}

maiorOrdem = maiorOrdem + 1;

演示现象：

原因分析 #

1. 垃圾回收机制影响：JavaScript/TypeScript的垃圾回收器会标记不再被引用的变量为可回收资源。你的代码中，sumarioPessoaTemp在if代码块执行完毕后就没有被后续代码直接引用，调试器为了节省内存，可能提前停止跟踪该变量的状态，导致后续无法查看内容。
2. 调试器的优化策略：主流调试工具（如VS Code Debugger、Chrome DevTools）会对调试过程做性能优化，对于确定不再被使用的变量，会减少对其内存的监控，避免占用过多调试资源，这就会出现变量内容“消失”的假象。
3. 编译优化的影响：如果TypeScript开启了编译优化（即使是开发环境的轻量优化），编译后的JavaScript可能会对未使用的变量做消除或重命名处理，导致调试时变量映射出现异常。

解决办法 #

• 强制保留变量引用：在代码末尾添加对sumarioPessoaTemp的无意义引用，让调试器认为该变量仍在被使用。比如：

  // 强制保留引用，避免调试器回收
  // @ts-ignore
  sumarioPessoaTemp;
  

  或者添加一个不影响逻辑的console.log（调试完成后可删除）：

  console.log(sumarioPessoaTemp);
  

• 使用调试器Watch面板：将sumarioPessoaTemp添加到调试器的Watch列表中，强制调试器持续监控该变量的状态，即使后续代码没有引用它，也能在Watch面板中查看最新内容。
• 调整调试器设置：在VS Code的launch.json中确保开启完整的source map，关闭代码优化相关选项；Chrome DevTools中可以在设置里勾选“Disable JavaScript optimization”，强制调试器不优化变量跟踪。

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