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?

Solution 1

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

for eg:

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

Solution 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

Comments

[Chicowitz]

Being less clear on how to execute code in Chrome itself, the 2nd option works for me. Thanks very much

[lealceldeiro]

@Chicowitz, the inconvenient of debugging in the dev tool directly once the html is rendered is that values are shown as the final evaluation of all variables, while with the second option you can see the values variables are getting (and being modifying) on execution time in the controller. Use the first for evaluating values you want to see their final result once the page is rendered, and the second one for seeing all the process as values of variables change from one value to another.

[David]

I use <pre>{{CoursesVm | json}}/</pre>

[Chicowitz]

Lol, to clarify since I can't edit my comment: 2nd option was edited to become the 1st option in this answer

[lealceldeiro]

@Chicowitz yes, indeed. I forgot you added a comment specifying the option worked for you. I edited the post since Angular+2 is more widely used now. You can always delete the old comment and post a new one :) Thanks for pointing this out.