在vscode中調試JavaScript時如何找到當前函數的閉包

Question

我正在通過VSCode和Chrome調試React JS應用程序。 在斷點處，我感興趣的變量在變量列表的“關閉”部分中可見。 在堆棧跟蹤的其他級別，變量不可用。 該函數是在其JS文件的頂級定義的，我看不到在哪里定義閉包，尤其是在第一次分配變量的地方。 從其他地方調用的閉包作用域變量是不同的，我不知道為什么。

VS Code Debugging或Chrome Dev Tools中是否可以查看關閉范圍的定義位置？

舉一個簡單的例子，如果調試下面的JS代碼並在a=1處達到斷點，是否有任何方法可以識別在其中定義a的closureScope變量？ 在實際示例中，函數和閉包作用域變量顯然沒有包含在任何其他函數或塊中，但是我對現代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; 你想要斷點的地方
• 在左側展開variable列表，然后展開closureScope以查看該特定范圍內的值

Answer 2

這是Chrome開發人員工具的替代選擇