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

strange behavior when debugging angularjs directives with lexical scoping (closure) in chrome dev tools

本文关键字：指令 angularjs 闭包 开发工具 chrome 调试 作用域 词法      更新时间：2023-09-26

这是我的代码与一个简单的指令叫做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 console.log，我得到相同的结果——它工作，但不是在开发工具控制台。

Chrome Developer Tools显示并提供访问本地和全局变量在"Sources"answers"Console"选项卡，当它遇到你设置的断点。当"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

相关文章：