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:
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.
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)".
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.
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.
Source collected from
http://www.c-sharpcorner.com/UploadFile/9c2805/getting-started-with-angularjs-batarang/
No comments :
Post a Comment