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:

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.

Next Recommended Readings