VSCode搭配Firefox调试器为何显示错误的变量值？

问题背景与现象 #

调试JavaScript项目时遭遇调试器显示bug：VSCode搭配Firefox调试器时，监视窗口的变量值与编辑器悬停显示的值不一致。实际trackGrid[toRow][toCol].type的值为"EE"，但悬停时却显示即将赋予它的新值"BL"——根源在于新值的变量名和对象数组成员名均为type。

进一步验证发现：

• 该问题仅出现在VSCode的Firefox调试器中，Chrome调试器无此异常
• Firefox浏览器自带的调试器（通过inspect打开）则错误显示该值为undefined

复现代码 #

<!DOCTYPE html>
<html>
<body>

<h2>Firefox调试器bug？</h2>
<p>在第25行添加断点，悬停查看<i>trackGrid[row][col].type</i>的'type'值</p>

<button onclick="testFunc(1,1)">运行演示</button>

<script>
  const trackGrid= [];

  function init() {
    trackGrid[0] = [];
    trackGrid[1] = [];
    trackGrid[0][0] = { "type" : "AA",  "id": 0 };
    trackGrid[0][1] = { "type" : "AB",  "id": 1 };
    trackGrid[1][0] = { "type" : "BA",  "id": 10 };
    trackGrid[1][1] = { "type" : "BB",  "id": 11 };
  }

  function testFunc(row,col) {
    init();
    var type = "XX";
    trackGrid[row][col].type = type;
}
</script>

</body>
</html>

VSCode调试配置（launch.json） #

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "firefox",
            "request": "launch",
            "name": "用Firefox打开",
            "file": "c:\\Users\\quilk\\source\\repos\\vscodebug\\test.html"
        },
        {
            "type": "chrome",
            "request": "launch",
            "name": "用Chrome打开",
            "file": "c:\\Users\\quilk\\source\\repos\\vscodebug\\test.html"
        },
        {
            "type": "msedge",
            "request": "launch",
            "name": "用Edge打开",
            "file": "c:\\Users\\quilk\\source\\repos\\vscodebug\\test.html"
        }
    ]
}

临时解决方法 #

1. 修改变量名：避免使用与对象属性同名的变量，比如将var type = "XX"改为var newType = "XX"，再执行trackGrid[row][col].type = newType，即可消除显示异常
2. 控制台验证真实值：调试时直接在控制台输入trackGrid[row][col].type，获取变量的实际值，不受悬停/监视窗口的错误显示影响

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