从开发人员工具中访问IIFE变量

时间:2016-08-08 09:41:03

标签: javascript developer-tools iife

让我先说一下,我知道它不是以编程方式从外部访问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将包含游戏循环。< / p>

因此,IIFE中声明的所有变量和函数必须存在于浏览器内存中,但由于封装,它们无法从开发人员控制台显示。

我的问题是:有没有什么方法可以在没有预先修改代码的情况下显示或操作它们,而它正在运行?由于这些变量存在于内存中并被使用?也许通过某种调试?

我的问题主要针对Firefox和Chrome(Firebug和开发人员工具),但如果有一般方法可以使用它。

1 个答案:

答案 0 :(得分:6)

IIFE中的

Put a breakpoint,将在将来运行的一行代码中。

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

(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>