如何在AngularJS的上下文中使用Google Chrome Developer Tool在HTML代码中设置断点

How to set a breakpoint in HTML-code with Google Chrome Developer Tool in the context of AngularJS?

本文关键字：Developer Tool HTML 代码 断点 设置 Chrome AngularJS 上下文 Google      更新时间：2023-09-26

我有以下一行HTML代码，即：

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

我不清楚，当点击按钮并触发ng-click事件时，在哪个文件中调用了哪个函数。

所以我想知道如何在ng-click="round.won=true"旁边的Google Chrome Developer Tool中设置断点，以便跳转到相关的Javascript函数/文件中？

您不能在HTML代码上设置断点。但是，如果您的代码如下所示：

HTML

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

控制器

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

然后，您可以在JS文件中的winRound函数中设置一个断点。但是，请确保您的JS代码（控制器）位于一个单独的JS文件中，而不是HTML中的脚本标记中。

相关文章：