2

这是我的代码，带有一个名为 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 而不是像范围、el 和 attrs 这样的外部变量......如果我做一个 console.log对于其他变量，我得到相同的结果——它有效，但在开发工具控制台中无效。

4

1 回答 1

3

当 Chrome 开发者工具遇到您设置的断点时，它会在“源”和“控制台”选项卡中显示并提供对本地和全局变量的访问。当它们在您设置断点的函数范围内使用时，它还将提供对“闭包”变量的视图和访问。这就是为什么在调用 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

于 2014-05-05T00:41:45.457 回答