使用AngularJS打破Chrome中的变量更改

Question

与this问题类似，我想打破Chrome中的变量。但是，我使用的是Angular，因此我想要打破的变量仅在HTML中定义。它基本上是这样的 -

<div ng-click="show = !show">...<div>
<div ng-class="{expanded : show}">...

控制器中没有代码。那么当show发生变化时，如何让Chrome暂停？我知道我可以将代码更改为包装show的函数调用，然后在那里放置一个断点，但是它的使用效率很低，我想知道是否有办法直接中断变量

Answer 1

嗯，您可以通过控制台获得所需的功能：

1. 首先访问定义show属性的作用域。 Here 是如何做到这一点的解释。
2. 然后，您可以通过Chrome的Object.observe。
观察此范围对象的更改

为简化此过程，您可以定义全局函数，如下所示：

function breakOn(property, object) {
    Object.observe(object, function (changes) {
      changes.forEach(function (change) {
        if (change.name === property) {
          console.log("Property " + property + " changed");
          console.log(change);
          debugger;
        }
      });
    });
  }

然后在第1步之后输入控制台：breakOn('show', $scope);