2

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.

Martin Eckleben
  • 633
  • 7
  • 22
David says Reinstate Monica
  • 16,634
  • 19
  • 69
  • 108
  • There *is* a way to do it but it would be an even more "inefficient use of time". You would have to put a breakpoint inside AngularJs's `ng-click` or `$watch` code but that would most likely be fired so many times that you would be constantly hitting the breakpoint – JoseM Oct 10 '14 at 16:02

1 Answers1

4

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

Community
  • 1
  • 1
Alexey
  • 1,237
  • 7
  • 13
  • 2
    Object.observe was removed from Chrome, starting from Chrome 50 http://stackoverflow.com/questions/36195945/object-observe-remove-in-chrome-50 – kolobok Oct 27 '16 at 22:34