Introducing Batarang : AngularJS Debugger -Tutorial Savvy

Batarang is an AngularJS application debugger for Chrome Browser and available as chrome extension.

Batarang can be found in Chrome web store and installed.Below URL points to the Batarang Chrome web store link.

batarang chrome link

Github project URL of Batarang is listed below.

https://github.com/angular/angularjs-batarang

After successful installation you can find a new tab called ‘AngularJS‘ listed in developer console.To activate Batarang you need to select the ‘Enable‘ check box present inside the tab.

In this demo, “We will explore Batarang debugger with a simple AngularJS application code“.

For this demo We have created a controller and a provider.name of the provider is ‘Name‘ and simply returns my name ‘Sandeep‘ and the controller is ‘NameController‘ it gets the name from the provider and binds to the scope variable ‘myName‘.Also we have added a dummy watcher to ‘myName‘.Code for this demo is listed below(JSBIN).

<!DOCTYPE html>
<html ng-app="batarangDemoApp">

<head lang="en">
    <meta charset="UTF-8">
    <title>Batarang AngularJS Debugger</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-resource.min.js"></script>
</head>

<body>
    <h2 ng-controller="NameController">
        {{myName}}
    </h2>
    <script>
        var batarangDemoApp = angular.module("batarangDemoApp", ['ngResource']);
        batarangDemoApp.provider("Name", function() {
            this.$get = function() {
                return {
                    getName: 'sandeep'
                }
            };
        });
        batarangDemoApp.controller("NameController", ["$scope", "Name",
            function($scope, Name) {
                $scope.myName = Name.getName;
                $scope.$watch("myName", function() {});
            }
        ]);
    </script>
</body>

</html>

Batarang provides model,performance and dependency graph debugging information in 3 different tabs.It also provides a option tab to configure Batarang tools.

Below screenshot shows the detail of Model tab.It list all the scope variable attached to an element.Also it has an option to inspect an element to look for any model is attached or not.