How to debug objects from Angular template (html file)

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:

//...controller
function 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

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

for eg:

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