CODEWITHSUNDEEP
javascripthtmlangularjsgoogle-chromebreakpoints
David says Reinstate Monica
David says Reinstate Monica

Reputation: 20139

Break on variable change in Chrome using AngularJS

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}">...

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.

Upvotes: 2

Views: 5142

Answers (1)

Alexey
Alexey

Reputation: 1330

Well, you can achive the desired feature via console:

  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;
        }
      });
    });
  }

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

Upvotes: 4

Related Questions