Debugging Angular with Batarang

Batarang is a debugging tool developed for Angular.js in 2012. It is a chrome extension to debug Angular.js applications. Batarang adds debugging and profiling tools for your application to Chrome DevTools. To install visit the link and add it to tp Chrome as described in the following.

      Open your Angular.js application in Chrome.  Go to tools select developer tools.You will find a new AngularJS tab. Click the checkbox to enable. Here is our example. It has a textbox to accept username as input and a button to add users. After adding the user , the user will be displayed by ng-repeat.

User.html


App.js

App.js file has $scope.users which is the array containing a list of users. $scope.addUsers is a function that adds user info to the list.


Now we will see how to debug using Batarang.

Type username,let it be abc and click scope(003). You will see the information in Models for(003). Click the add users button to update Scope(003). The Enable Inspector button is similar to the inspect element feature of the browser. To see which component/element is consuming how much time for execution go to the performance tab.