VS Code Chrome调试扩展中this显示未定义，求助排查原因

这个问题我碰到过好几次，大概率是this的绑定规则或者调试上下文的问题，给你梳理几个常见的原因和解决思路：

• 严格模式的默认行为
  如果你的代码开头加了'use strict';开启严格模式，那在全局作用域或者未绑定的普通函数里，this会默认是undefined（而非浏览器里的window对象）。这是ES5严格模式的规范，不是调试工具的bug。你可以检查代码是否启用了严格模式，如果是这个原因，要么调整代码里this的使用方式，要么直接在WATCH面板里查看window来替代全局上下文的this。

• 箭头函数的this继承特性
  箭头函数本身没有独立的this，它会继承外层作用域的this。如果你的断点停在箭头函数内部，WATCH面板里显示的this其实是外层上下文的this，但如果外层作用域本身处于严格模式，就会显示undefined。你可以试着把断点移到外层的普通函数里，或者在WATCH里直接查看外层作用域的变量来确认上下文。

• ES模块的顶级作用域限制
  如果你的代码是ES模块（使用import/export语法），模块的顶级作用域里this本来就是undefined，这是ES模块的规范，和调试工具无关。这种情况下，你不需要纠结顶级的this，专注于函数内部的this绑定即可。

• 调试配置的额外参数影响
  检查VS Code里的.vscode/launch.json配置，看看有没有添加强制开启严格模式的runtimeArgs参数（比如--enable-strict-mode）。这类参数会强制改变执行上下文的this行为。正常的Chrome调试配置应该类似这样：

  {
    "version": "0.2.0",
    "configurations": [
      {
        "type": "chrome",
        "request": "launch",
        "name": "Launch Chrome against localhost",
        "url": "http://localhost:8080",
        "webRoot": "${workspaceFolder}"
      }
    ]
  }
  

  若有多余的严格模式参数，删掉后重启调试试试。

• 断点位置的时机问题
  如果断点刚好停在函数的第一行，可能还没进入完整的函数执行上下文，this还没完成绑定。你可以把断点往后挪一行，或者在函数内部的具体执行语句上设置断点，再查看this的值。

最后给你个验证小技巧：在代码里加一行console.log(this)，运行后看浏览器控制台的输出。如果控制台也是undefined，那说明是代码本身的this绑定问题；如果控制台有值但WATCH面板没有，试试重启VS Code和Chrome，或者把Chrome调试扩展更新到最新版本。

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