如何在AngularJS上下文中使用Google Chrome开发者工具在HTML代码中设置断点？

Question

I have the following line of HTML-code ie:

<button ng-click="round.won=true" ng-class="{'active':round.won && !adjustedYesNo}" class="button button-outline">Gewonnen</button>

It is not clear to me, which function has been called in which file when having clicked a button and fired the ng-click-event.

So I wonder how to set a breakpoint in Google Chrome Developer Tool next to ng-click="round.won=true" in order to jump into the related Javascript-function/file?

Answer 1

You cannot set breakpoints on HTML code. However if your code was something like below:

HTML

 <button ng-click="winRound()" ng-class="{'active':round.won && !adjustedYesNo}" class="button button-outline">Gewonnen</button> 

Controller

app.controller(function($scope) {
  $scope.winRound = function() {
     $scope.round.win = true;
  }
});

Then you could have set a breakpoint inside the winRound function in the JS file. But make sure that your JS code (controller) is places in a separate JS file and not inside the script tag in HTML.