javascript - 从开发者工具访问 IIFE 变量

Question

首先让我说我知道它不是从外部以编程方式访问 IIFE 的内部变量，除非它们已被设置为可在全局范围内访问。

例如:

(function() {
    var a = "Hello"; // a isn't accessible from the outer scope
)();

console.log(a); // a is undefined

但是:

(function() {
    var a = "Hello";
    global.a = a;
)();

console.log(a); // Displays "Hello"

在某些情况下，IIFE 可能会持续执行几秒钟，或者在页面浏览的整个过程中，通常是在用 JavaScript 编写的游戏中，IIFE 将包含游戏循环。

因此，IIFE 中声明的所有变量和函数都必须存在于浏览器内存中，但由于封装的原因，它们不能从开发者控制台显示。

我的问题是:有没有什么方法可以在运行时显示或操作它们，而无需事先修改代码？由于这些变量存在于内存中并被使用？也许通过某种形式的调试？

我的问题主要针对 Firefox 和 Chrome(Firebug 和开发人员工具)，但如果有通用的方法也可以。

Answer 1

Put a breakpoint在 IIFE 中，在一行将在未来运行的代码上。

当命中断点时，控制台将在该范围内。

(function() {
  document.querySelector("button").addEventListener("click", myFunction);

  var a = 1;
  
  function myFunction (ev) {
    debugger; // You could also add this breakpoint using the Dev Tools UI
    console.log("A is ", a);
  }
})();

<button>Button</button>