Debugging AngularJS applications effectively

Debugging AngularJS applications can be challenging due to its two-way data binding, digest cycle, and dependency injection system. However, using the right tools and techniques, you can efficiently identify and fix issues.

---

1. Essential Debugging Tools

Tool	Usage
Chrome DevTools	Inspect DOM elements, network requests, and console logs.
AngularJS Batarang	Chrome extension for inspecting scopes and performance.
ng-inspector	Chrome extension to visualize AngularJS scopes and bindings.
$log Service	Alternative to console.log() for logging in AngularJS.
$exceptionHandler	Global error handling for uncaught exceptions.

---

2. Debugging Common Issues

2.1. Debugging Data Binding Issues

Sometimes, the UI does not reflect scope changes. To debug:

Solution: Inspect Scope Variables in Console

angular.element(document.body).scope(); // Get main scope
angular.element(document.body).injector().get('$rootScope'); // Get $rootScope

Then, you can modify scope variables from the console:

angular.element(document.body).scope().user = { name: "John" };
angular.element(document.body).scope().$apply(); // Force update UI

Ensures scope changes reflect in the UI.

---

2.2. Debugging Digest Cycle Issues

If AngularJS throws $digest already in progress or UI doesn’t update, it’s related to the digest cycle.

Solution: Use $apply() Correctly

If an external event updates a variable outside AngularJS:

setTimeout(function() {
    $scope.message = "Updated!";
    $scope.$apply(); // Manually trigger digest cycle
}, 1000);

Ensures UI updates when values change asynchronously.

---

2.3. Tracking Watchers

Too many watchers ($watch) slow down the application.

Solution: Count Active Watchers

Run this in the console:

angular.element(document).injector().invoke(function($rootScope) {
    var watchers = 0;
    var countWatchers = function(scope) {
        if (scope.$$watchers) {
            watchers += scope.$$watchers.length;
        }
        angular.forEach(scope.$$childHead, countWatchers);
    };
    countWatchers($rootScope);
    console.log("Total watchers:", watchers);
});

Helps optimize performance by identifying excessive watchers.

---

2.4. Debugging Dependency Injection Issues

If you get “[$injector:unpr] Unknown provider”, it means a dependency is missing.

Solution: Use Explicit Dependency Injection

Instead of:

app.controller("MyController", function($scope, myService) { ... });

Use:

app.controller("MyController", ["$scope", "myService", function($scope, myService) { ... }]);

Prevents minification issues with dependency injection.

---

2.5. Handling API Errors in $http

Solution: Use .catch() for Error Handling

$http.get("/api/data").then(function(response) {
    console.log("Success:", response.data);
}).catch(function(error) {
    console.error("API Error:", error);
});

Prevents unhandled API errors from crashing the app.

---

2.6. Debugging Routing Issues

If routes aren’t working, check $routeProvider configuration.

Solution: Enable Debug Logging in $routeChangeError

app.run(["$rootScope", function($rootScope) {
    $rootScope.$on("$routeChangeError", function(event, current, previous, rejection) {
        console.error("Route change error:", rejection);
    });
}]);

Helps identify missing templates or authentication failures.

---

2.7. Debugging $digest() and $apply() Issues

If data doesn’t update, check the digest cycle.

Solution: Manually Trigger $digest()

$scope.$apply(); // Use this if outside AngularJS scope
$scope.$digest(); // Use only inside scope functions

Ensures data updates reflect in the UI.

---

2.8. Debugging Memory Leaks

Solution: Remove Unused Watchers

var unwatch = $scope.$watch("myVariable", function(newValue) { ... });
$scope.$on("$destroy", function() {
    unwatch(); // Remove watcher
});

Prevents performance issues caused by lingering watchers.

---

3. Debugging with Chrome DevTools

3.1. Inspecting Scope Variables

1. Open Chrome DevTools (F12).
2. Select an element with ng-scope in the Elements tab.
3. Run this in the Console:

angular.element($0).scope(); // Get scope of selected element

Useful for debugging nested scopes.

---

3.2. Monitoring API Requests

1. Open Network tab in Chrome DevTools.
2. Filter by XHR to see API requests.
3. Check response status, payload, and errors.

Helps identify failing API calls.

---

3.3. Using Breakpoints in JavaScript

1. Go to Sources tab in DevTools.
2. Find the relevant JavaScript file.
3. Click on the line number to set a breakpoint.

Allows step-by-step debugging of AngularJS code.