javascript - 使用 AngularJS 在 Chrome 中中断变量更改

Question

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

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

Controller 中没有代码。那么如何让 Chrome 在 show 更改时暂停呢？我知道我可以将代码更改为包装 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);