CODEWITHSUNDEEP
javascripthtmlangularjsgoogle-chrome
Chicowitz
Chicowitz

Reputation: 5929

How to debug objects from Angular template (html file)

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?

Upvotes: 37

Views: 34758

Answers (3)

Vitaliy Vostroknutov
Vitaliy Vostroknutov

Reputation: 51

template:

<my-a [prop]="log(a)"></my-a>

controller:

log(o: any) {
 console.log(o);
 return o; 
}

it may be wrapped as pipe that logs and return same

<my-a [prop]="a | log"></my-a>

Upvotes: 1

lealceldeiro
lealceldeiro

Reputation: 14958

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

Upvotes: 11

santon
santon

Reputation: 1834

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

for eg:

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

Upvotes: 49

Related Questions