javascript - 在 vscode 中调试 JavaScript 时如何找到当前函数的闭包

Question

我正在通过 VSCode 和 Chrome 调试 React JS 应用程序。在断点处，我感兴趣的变量在变量列表的“闭包”部分中可见。在堆栈跟踪的其他级别，该变量不可用。该函数是在其 JS 文件的顶层定义的，我看不到闭包的定义位置，特别是变量首次赋值的位置。从其他地方调用的闭包作用域变量是不同的，我不明白为什么。

VS Code 调试或 Chrome 开发工具中有什么方法可以查看闭包范围的定义位置吗？

举个简单的例子，如果调试下面的 JS 代码并在 a=1 处命断点，有什么方法可以识别定义了 a 的closureScope变量？在真实的例子中，函数和闭包作用域变量显然没有包含在任何其他函数或 block 中，但我对现代 JS 和闭包的理解是有限的，我可能会遗漏一些明显的东西。

function main() {
  let closureScope = (
    function() {
    var a = 0;
    return {
      inside1: function() {
        a = 1;
      },
      inside2: function() {
        a = 2;
      }
    };
  })();

  closureScope.inside1();
  closureScope.inside2();
}

main();

Answer 1

您可以简单地在 vscode 或 chrome 中使用调试器

• 在代码中添加断点，您可以点击文件左侧的红点来添加断点
• 或者在您想要断点的地方使用debugger;
• 在左侧展开变量列表，然后closureScope查看您在该特定范围内的值