AngularJS Batarang
I'm a big fan of debugging so I was interested in a tool for AngularJS. I found it and would like to share it among all of you. The tool is Batarang..
What Batarang is
Batarang adds debugging and profiling tools for AngularJS application to Chrome DevTools. Angular Batarang is a Chrome extension developed by the Angular team at Google that integrates very nicely as a debugging tool for Angular apps.
Install from Chrome Web Store
https://chrome.google.com/webstore/detail/ighdmehidhipcmcojjgiloacoafjmpfk
Visit the preceding URL and add to it tp Chrome as in the following:
![AngularJS Batarang in Chrome Web Store]()
Run Batarang
- Open your AngularJS application in Chrome
- Go to Tools -> Developer Tools or press F12
- You'll find there is a new “AngularJS” tab.
![AngularJS Tab in Batarang]()
Click the "Enable" checkbox.
For an explanation I've written a small application for you. The following are the files.
User.html
It has a TextBox that will accept a username as input and there is a button "Add Users" to add it. After the user is added it'll be displayed immediately by ng-repeat.
![Html Page in Batarang]()
App.js
- $scope.users: array that contains a list of users
- $scope.addUsers: function that adds a user into $scope.users
![Js Page in Batarang]()
Batarang in Action
Models Tab
Type the user name, say ABC, and click "Scope (003)". You'll see the information in "Models for (003)".
![Models Tab in Batarang]()
Now click the "Add Users" button and "Scope (003)" is updated
![Add Users in Models Tab]()
If you notice there is another "Scope (004)" element created. Click on that and it'll show youthe following:
![Scopes in Models Tab]()
This "u:ABC" is part of ng-repeat (refer to the user.html code).
Enable Inspector Button
Click "Enable Inspector" button, + sign and hover over element(s), it's similar to the inspect element feature of the browser. You'll notice pop-ups show up there itself.
![Enabling Inspector Button]()
Performance Tab
Look at "Watch Tree", for example, it'll tell you which component/element is consuming how much time for execution
![Permonance Tab in Batarang]()
Options Tab
You can see where in your page scope applies, click "Show Scopes" and similarly "Show Bindings" for details.
![Operations Tab in Batarang]()
I hope you enjoyed reading about this awesome debugging tool Batarang.
Please share your feedback.