Debugging AngularJS Applications with Chrome DevTools

Debugging AngularJS applications effectively is crucial for identifying and resolving issues quickly. Chrome DevTools provides powerful features to inspect, track, and debug AngularJS applications.

---

1. Opening Chrome DevTools

To open Chrome DevTools, use one of the following:

• Keyboard Shortcut:
  • Windows/Linux: Ctrl + Shift + I or F12
  • Mac: Cmd + Option + I
• Right-click on the page → Click Inspect

---

2. Inspecting AngularJS Scope with $scope and $apply()

To inspect AngularJS scope values:

A. Select an Element with AngularJS Binding

1. Open Elements tab
2. Select the desired AngularJS-bound element
3. Switch to Console

B. Access $scope from Console

angular.element($0).scope()

$0 refers to the selected DOM element in the Elements tab.

C. Modify Scope Variables Manually

angular.element($0).scope().username = "New Name";
angular.element($0).scope().$apply(); // To update UI

---

3. Debugging AngularJS Controllers

A. Add Breakpoints in JavaScript Code

1. Go to the Sources tab in DevTools
2. Open your AngularJS controller/service file
3. Click on the line number where you want a breakpoint
4. Reload the page and check values at breakpoints

B. Manually Trigger Debugging with debugger;

Add debugger; inside a function in your AngularJS code:

$scope.updateUser = function() {
    debugger;
    $scope.username = "Updated Name";
};

This will pause execution when the function is triggered.

---

4. Using console.log() for Debugging

To print AngularJS variables or objects in the Console:

console.log($scope.users);
console.table($scope.users); // Displays data in table format

---

5. Tracking HTTP Requests Using Chrome DevTools

A. Monitor API Calls in the Network Tab

1. Open DevTools → Network Tab
2. Click on XHR or Fetch/XHR to filter API requests
3. Click on a request to inspect Headers, Response, and Timing

B. Mock API Responses in DevTools

1. Right-click on an API request
2. Select Edit and Resend
3. Modify request parameters and click Send

---

6. Debugging AngularJS Events ($emit, $broadcast, $on)

A. Track Event Emissions in Console

Use $emit and $broadcast to inspect events:

$scope.$on('customEvent', function(event, data) {
    console.log("Event Received: ", data);
});

B. Manually Fire Events in Console

angular.element($0).scope().$emit('customEvent', { message: "Hello!" });
angular.element($0).scope().$apply();

---

7. Profiling Performance with Chrome DevTools

A. Analyze Performance Bottlenecks

1. Open DevTools → Performance tab
2. Click Start Profiling and interact with the app
3. Stop recording and analyze slow operations

B. Detecting Unnecessary Digest Cycles

Run this in Console to track $digest cycles:

angular.element(document.body).injector().get('$rootScope').$$watchersCount;

A high watcher count can slow down the application.

---

8. Using AngularJS Batarang Extension

• Install AngularJS Batarang from the Chrome Web Store
• Provides a visual representation of scope, bindings, and performance