在chrome开发工具中使用词法作用域（关闭）调试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处添加了断点。 然后，我尝试通过在我得到“ ReferenceError：outerVar未定义”中键入outerVar从开发工具控制台获取值。

但是当我将myFunc修改为

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

我得到的是价值，甚至更多，我可以在开发工具控制台上从outVar输出值，但只能输出outVar，而不是外部变量（例如scope，el和attrs），如果我执行console.log，也可以输出。对于其他变量，我得到相同的结果-它可以工作，但不能在开发工具控制台中使用。

Answer 1

当Chrome开发者工具遇到您设置的断点时，它会在“源”和“控制台”选项卡中显示并提供对本地和全局变量的访问权限。 当在设置断点的函数范围内使用“ Closure”变量时，它还将提供视图和访问权限。这就是为什么在内部调用console.log（）时看到外部变量的原因您的功能。

但是，Developer Tools无法为您提供对外部作用域中任何变量的访问权，但是这些变量在设置断点的局部作用域中没有使用。 为了在“控制台”中访问此类变量并在“源”中进行查看，可以在“源”的“调用堆栈”部分中选择超出断点范围的范围。

下面是一个有注释的示例，该示例讨论了从函数内部的断点可见变量的位置。 它不包含任何AngularJS代码，因为您描述的问题根本不是特定于Angular的。

// 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(); 
})( );

Plunkr