How to debug objects from Angular template (html file)

Question

Creating a template, I have some Angular code within some HTML elements:

<button id="btnMainMenu" class="button button-icon fa fa-chevron-left header-icon"         ng-if="(!CoursesVm.showcheckboxes || (CoursesVm.tabSelected == 'current') )" ... 

I want to debug the ng-if condition to check the values of my CoursesVm object. How would I do this in Chrome for example?

Answer 1

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

for eg:

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

Answer 2

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