使用 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);