使用Angular在Chrome中改变变化 [英] Break on variable change in Chrome using Angular

问题描述

与这个问题类似，我想在Chrome中改变变化。但是，我正在使用Angular，所以我想打破的变量只在HTML中定义。它基本上就像这样 -

Similar to this question, I would like to break on a variable change in Chrome. However, I'm using Angular, so the variable I would like to break on is only defined in the HTML. Its essentially something like this -

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

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

With no code in the controller. So how can I get Chrome to pause when show is changed? I know that I can change the code to a function call that wraps show and then put a breakpoint there, but its an inefficient use of time and I would like to know if there is a way to directly break on variable change.

推荐答案

那么，您可以通过控制台实现所需功能：

Well, you can achive the desired feature via console:

1. 首先访问范围，其中定义了 show 属性。 此处
   是一个解释你如何做到这一点。然后你可以通过Chrome的 Object.observe 观察这个范围对象的变化。

1. First get access to the scope, on which show property is defined. Here is an explanation of how you can do this.
2. Then you may observe changes of this scope object via Chrome's Object.observe.

为了简化这个过程，你可以像这样定义全局函数：

To simplify this process you may define global function like this one:

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）;

And then after step 1 type in the console: breakOn('show', $scope);

这篇关于使用Angular在Chrome中改变变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！