This article describes the AngularJS Batarang. 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.
AngularJS BatarangI'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 isBatarang 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 Storehttps://chrome.google.com/webstore/detail/ighdmehidhipcmcojjgiloacoafjmpfkVisit the preceding URL and add to it tp Chrome as in the following:
Run Batarang
Click the "Enable" checkbox.For an explanation I've written a small application for you. The following are the files.User.htmlIt 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
Batarang in ActionModels TabType 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 ButtonClick "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 TabLook at "Watch Tree", for example, it'll tell you which component/element is consuming how much time for execution
Options TabYou 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.
AngularJS Recipes