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.


  1. This comment has been removed by the author.

  2. 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...

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

  4. 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:

    Any ideas? Thanks!

  5. 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.

  6. 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?

  7. 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 :-(

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


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