Getting Started With AngularJS Batarang

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:

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.

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.

App.js

• $scope.users: array that contains a list of users
• $scope.addUsers: function that adds a user into $scope.users

Batarang in Action

Models Tab

Type the user name, say ABC, and click "Scope (003)". You'll see the information in "Models for (003)".

Now click the "Add Users" button and "Scope (003)" is updated

If you notice there is another "Scope (004)" element created. Click on that and it'll show youthe following:

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.

Performance Tab

Look at "Watch Tree", for example, it'll tell you which component/element is consuming how much time for execution

Options Tab

You can see where in your page scope applies, click "Show Scopes" and similarly "Show Bindings" for details.

I hope you enjoyed reading about this awesome debugging tool Batarang.

Please share your feedback.