在chrome dev工具中调试具有词法作用域(闭包)的angularjs指令时的奇怪行为

Question

这是我的代码，带有一个名为test的简单指令：

var app =  angular.module("app",[]);

app.directive('test',function(){
   return {
      link(scope,el,attrs){
        var outerVar = 'im in the outer scope';

        var myFunc = function(){
           var someText = 'just to be able to put a breakpoint here';
        }

        myFunc();

      }
   }
});

我在var someText添加了断点。然后，我尝试通过输入outerVar从dev工具控制台获取值，我在其中输入了"ReferenceError: outerVar未定义“。

但是当我将myFunc修改为

var myfuction(){
 console.log(outerVar);
};

我得到了这个值，更多的是我可以在开发工具控制台上输出来自outVar的值，但是只有outVar，而不能输出外部变量，如scope、el和attrs .同样，如果我对其他变量执行a console.log，则得到相同的结果--它可以工作，但在开发工具控制台中不行。

Answer 1

在碰到设置的断点时，会显示并提供对“源”和“控制台”选项卡中局部变量和全局变量的访问。当在设置断点的函数范围中使用“闭包”变量时，它还将提供对“闭包”变量的视图和访问。这就是为什么在函数中调用console.log()时看到外部变量的原因。

但是，开发人员工具没有为您提供对外部作用域中没有在设置断点的本地作用域中使用的任何变量的访问。为了访问“控制台”中的这些变量并在“源”中检查，可以在“源”的“调用堆栈”部分中选择高于断点的作用域。

下面是一个注释过的例子，讨论从函数内部的断点中可以看到变量的位置。它不包括任何AngularJS代码，因为您所描述的问题根本不是特定的角度。

// seen as "Global" from breakpoint inside of myFunc or anywhere else
var global = "global"; 

(function() {
  // seen as "Closure" from breakpoint inside of myFunc only if used there 
  var outer = "outer"; 

  function myFunc() {
    // seen as "Local" from breakpoint inside of myFunc
    var inner = 'inner'; 

    // uncomment to see "outer" in Dev Tools
    //outer;

    debugger;
  }      
  myFunc(); 
})( );

普朗克