Using Batarang to Debug AngularJS

Posted in Tutorials

We will now continue with our AngularJS tutorial series.  The code in this examples continues from a previous tutorial linked here.   In between we installed Batarang.   Today we will look at how to use Batarang to help with debuggin AngularJS applications.

1. Running the code from the previous tutorial linked here, we see that when the add button is clicked, we write a message to the console revealed in Chrome when you go to Tools -> Developer Tools …

2. Since we have installed Batarang, we that there is a new “AngularJS” tab which we will click on and checkmark enable…

To use Batarang, you will have to put your code up on the server.  It doesn’t seem to work for me on local dev machine.

3. Run the code on the server.   Select Batarang to watch the inner scope…

As you type “chicken” into your shopping list, see that “chicken” becomes the value of “itemToAdd” in the $scope.

Batarang enables us to see our internal objects so we are able to confirm that our addItem function code is working as expected.

6.  Another feature is enabled when you click on the “Enable Inspector” button …

Let’s continue coding in the next tutorial.

---