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

Break on variable change in Chrome using AngularJS

本文关键字：变量 AngularJS 破解 Chrome 使用      更新时间：2023-09-26

类似于这个问题，我想谈谈Chrome中的一个变量更改。然而，我使用的是Angular，所以我想中断的变量只在HTML中定义。它本质上是这样的——

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

控制器中没有代码。那么，当show更改时，我如何让Chrome暂停呢？我知道我可以将代码更改为封装show的函数调用，然后在那里放置断点，但这是对时间的低效使用，我想知道是否有方法直接中断变量更改。

好吧，您可以通过控制台实现所需的功能：

  1. 首先访问定义了show属性的作用域。在这里是对如何做到这一点的解释
  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);

相关文章：