GitHub LinkedIn RSS
Thursday, October 16, 2014

AngularJS Debugging with Batarang


It's been a while from the moment I started to blog about JavaScript topics and despite me being MEAN developer; Heh-heh, actually I'm quite friendly. Anyway, despite the MEAN orientation of the blog, I haven't talked much about the "A", that is AngularJS. Well, today we are going to fix this and since it's the first blog of the month, we'll be talking about Batarang - debugging tool for AngularJS.

Why even bother? I use Chrome


Over the years a lot of developers have shifted to rely entirely on Chrome developer tools in terms of debugging front end applications. While Chrome indeed provides a superb build-in debugging functionality, it doesn't support specific aspects of modern frameworks like AngularJS and Ember. For instance it's not aware AngularJS scopes and models. Being a JavaScript application, one can of course debug AngularJS code as any other web application, however if you're not a stranger to Zen Coding, than productivity should be your top concern. Besides Zen's mumbo jumbo, as for me I would rather spend as much as possible time creating new features instead of being sucked into debugging bog.

Where do I start? 


For starters you should download the Batarang extension from the it's Chrome Market page. The extension's page also provides an eight minutes youtube tutorial, which can be a good starting point for you.


Play with it, even though Batarang doesn't provide many features at first glance, the ones it does, are must have for AngularJS debugging. See you next time...