javascript - 在 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 处添加了断点。然后，我尝试通过输入outerVar从开发工具控制台获取值，但出现“ReferenceError:outerVar未定义”。

但是当我将 myFunc 修改为

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

我正在获取值，甚至可以在开发工具控制台上输出 outVar 的值，但只能输出 outVar 而不是范围、el 和 attrs 等外部变量...如果我执行 a对于其他变量，我得到了相同的结果——它有效，但在开发工具控制台中无效。

Answer 1

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

开发人员工具不提供对外部作用域中任何变量的访问权限，这些变量未在设置断点的本地作用域中使用。为了在“控制台”中访问此类变量并在“源”中查看，您可以在“源”的“调用堆栈”部分中选择断点上方的范围。

下面是一个带注释的示例，讨论变量在函数内部断点处可见的位置。它不包含任何 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