Monday, July 2, 2012

Introducing the AngularJS Batarang

Batarang Photo Credits: doranwa

For the past month, we've been working on a Chrome extension to help debug AngularJS applications. Today, we're introducing the AngularJS Batarang (a superheroic tool that lives up to its name). This extension features tools to help find and address performance bottlenecks, and visualize and debug applications.

We are releasing this early version because we'd love to get your feedback. Let us know what you think and what we should add or improve in the AngularJS Google Group.

Also be aware that this extension is built on experimental Chrome APIs, which means that you'll need Chrome Canary to use it. Additionally we can't upload it to the Chrome Web Store until the experimental APIs are available in the Chrome stable. Yes, we are living on the bleeding edge of Chrome extension development, but that's only because we want to provide you with features that can't be implemented in current stable Chrome version. It's just a matter of time until the needed APIs are stable, and installing the extension will be much easier.

Check out how to get the extension, then watch the tutorial below to get started.

Posted by at

9 comments:

  1. OlivierJuly 3, 2012 at 11:53 PM

    This comment has been removed by the author.

    ReplyDelete
  2. MartyMartinoJuly 4, 2012 at 1:31 PM

    really useful tool. can't wait to try it. is there any way to look at heap/memory usage - I've got a feeling this is why my angular app is a bit crashy on mobile safari...

    ReplyDelete
  3. Igor MinarJuly 6, 2012 at 3:30 AM

    you can use the built-in webinspector heap profiler (under profiles)

    ReplyDelete
  4. Trae R.July 16, 2012 at 1:24 PM

    I've tried 3 times now using Version 22.0.1208.0 canary and I can't get it to install. I've followed your steps above and restarted Chrome with no luck, per this message: http://www.hdipreview.com/misc/screen_shot_20120716_at_4.21.31_pm.jpg

    Any ideas? Thanks!

    ReplyDelete
  5. Trae R.July 17, 2012 at 9:02 AM

    It seems that, in the latest version of Chrome now, you have to clone the github repo and then use the 'Load unpacked extension' feature of chrome://chrome/extensions

    That worked for me, but there was no way to install the packed extension offered at the link above.

    ReplyDelete
  6. AnonymousMarch 19, 2013 at 7:58 AM

    I can't seem to get mine to work. I have an angularjs app that is operating correctly however, in the console $scope always comes back as not defined and enabling the extension shows the same. Any ideas why?

    ReplyDelete
  7. UnknownMay 3, 2013 at 5:28 PM

    This looks amazing...

    Typing $scope in the console definitely beats typing angular.element("a.b c").scope() all the time.

    Being able to seamlessly travel from the scope hierarchy to the DOM hierarchy is great.

    Profiling functionality also looks very useful, though it may not help make my site faster in IE ;-)

    ..but, chrome canary is not available for linux yet so no luck, unless I play with it in a VM :-(

    ReplyDelete
  8. Severin PuschkarskiFebruary 13, 2014 at 2:32 PM

    Doesnt work anymore ... whats up?

    ReplyDelete
  9. YevgeniyKMay 30, 2014 at 1:47 PM

    i can not change model elements. what am i doing wrong?

    ReplyDelete

Note: Only a member of this blog may post a comment.

Subscribe to: Post Comments (Atom)