Clever Geek Handbook

How to debug objects from Angular template (html file)

Template creation, I have some Angular code in 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 an ng-if condition to check the values ​​of my CoursesVm object. How can I do this in Chrome for example?

+8


source to share


2 answers


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

eg:



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


source


Solution for AngularJS (known to some as Angular 1)

Option 1: directly in Chrome Devtools

  • Grab a region like this:

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

  • Access to the object is like this (let's assume that the controller of this view is ): myCtrl

scope.myCtrl.CoursesVm



Option 2. Change your code

You can wrap the code inside ng-if

( (!CoursesVm.showcheckboxes || (CoursesVm.tabSelected == 'current') )

) inside a controller function and then debug that function.

Something like that:

//...controller
function checkIf(){
    debugger;  //open chrome 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()"
<!-- ... -->
+3


source






More articles:


All Articles