How to debug objects from Angular template (html file)

For people looking for Angular (2+), use json pipe

for eg:

 <span>{{ CoursesVm | json }}</span>  <textarea>{{ CoursesVm | json }}</textarea>

Option 1: Modify your code (_{^{For Angular2+ and AngularJS}})

_^Angular2+

...in the component add this temporal function

checkIf(value: any){    debugger;  //open the devtools and go to the view...code execution will stop here!    //..code to be checked... `value` can be inspected now along with all of the other component attributes}

... in the view: add an *ngIf with the created function providing the value you want to debug

<button *ngIf="checkIf(CoursesVm)">Button</button>

_^AngularJS

You can enclose the code inside the ng-if ((!CoursesVm.showcheckboxes || (CoursesVm.tabSelected == 'current') )) inside a controller function and then debug that function.

Something like this:

//...controllerfunction checkIf(){    debugger;  //open the devtools and go to the view...code execution will stop here!    //..code to be checked} <!--view supposing myCtrl is the alias for the controller here--><button id="btnMainMenu" class="button button-icon fa fa-chevron-left header-icon"        ng-if="myCtrl.checkIf()"<!-- ... -->

Option 2: Directly in chrome devtools (_{^{For AngularJS (Known to some people as Angular 1)}})

• Capture the scope like this:

  var scope = angular.element(document.getElementById('#btnMainMenu')).scope();

• Access to the object like this (supposing the controller of this view is myCtrl):

scope.myCtrl.CoursesVm