How to debug AngularJS applications with Chrome DevTools

Debugging is a critical part of the development process. AngularJS, being a JavaScript framework, provides various tools and techniques to help developers debug applications efficiently. One of the most powerful tools for debugging AngularJS applications is Chrome DevTools. It provides several built-in features that can help track down issues such as performance bottlenecks, unexpected behaviors, and errors in your application.

In this guide, we’ll explore different techniques and tools within Chrome DevTools to help debug your AngularJS applications effectively.

1. Enable AngularJS Debugging Tools

Before diving into the debugging features of Chrome DevTools, it is important to enable AngularJS-specific debugging tools.

AngularJS Debugging Tools (ng-inspect)

To inspect AngularJS-specific data such as scope, model, and directives, the ng-inspect tool (or the built-in AngularJS Batarang tool) is essential.

Batarang (AngularJS Inspector): This is a Chrome extension specifically for AngularJS that adds additional tools for inspecting scopes, models, and other AngularJS-specific entities in your application.
- Install the Batarang extension: AngularJS Batarang on Chrome Web Store

However, Batarang may not be maintained anymore. In such cases, you can use Chrome DevTools’ default features like ng or use Angular’s built-in debugging tools.

2. Accessing AngularJS Scope in DevTools Console

One of the simplest ways to debug an AngularJS application is to directly access the scope and model data from the DevTools console.

Accessing the AngularJS Scope in the Console

To inspect and manipulate AngularJS’s scope directly in the browser’s console:

Enable the ng global object: In AngularJS, you can access the $scope or $rootScope through the ng object. Simply type ng into the console to see the current AngularJS scope and its properties. javascriptCopyEditangular.element(document.querySelector('body')).scope(); This will return the $scope object of the body element, or you can replace 'body' with any specific element.
Inspecting a Scope Property: Suppose you want to inspect a variable in your scope, like userData. You can type this: javascriptCopyEditangular.element(document.querySelector('.your-element')).scope().userData; This will show the value of userData in the selected scope. You can also check if the model is being updated correctly in real-time.
Using $rootScope: If you want to inspect variables set on the $rootScope, you can directly access the rootScope object: javascriptCopyEditangular.element(document.querySelector('body')).injector().get('$rootScope'); This will return all the properties in the $rootScope.

3. Using `console.log` and `$log` for Debugging

In AngularJS applications, you can use $log as a special service that provides structured logging.

$log provides log levels like debug(), info(), warn(), and error() that can be easily filtered in the Chrome DevTools console.

app.controller('MyController', function($scope, $log) {
  $log.debug('This is a debug message');
  $log.info('This is an info message');
  $log.warn('This is a warning message');
  $log.error('This is an error message');
});

These messages will appear in the DevTools console with the appropriate log level.

4. Breakpoints for Debugging

Breakpoints are one of the most powerful features in Chrome DevTools. You can use breakpoints to pause the JavaScript execution at any line of code to inspect the state of the application, including scopes, models, and the call stack.

Setting Breakpoints

In the Sources Tab:
- Open Chrome DevTools and go to the Sources tab.
- Find the JavaScript file where you suspect the issue is (or find the AngularJS application code).
- Click on the line number to set a breakpoint.
Setting Breakpoints in AngularJS Code:
- If you are debugging AngularJS-specific code (such as controllers, services, or directives), you can set breakpoints in the controller or service code. As soon as the breakpoint is hit, Chrome will pause the execution and you can inspect the scope, models, and even step through the code line by line.

Watch Variables and Expressions:

Once the breakpoint is hit, you can use the Watch panel in DevTools to monitor the value of variables or expressions. For example, you can add expressions like:

$scope.userData

This will continuously evaluate and show the value of the expression at every breakpoint hit.

5. Profiling and Performance Debugging

Sometimes, performance issues can be hard to debug, but Chrome DevTools offers a set of tools to profile and debug your AngularJS application’s performance.

Using Timeline (Performance Tab)

Open the Performance tab in Chrome DevTools.
Click the Record button and interact with your application.
Once done, click Stop. Chrome will show the entire timeline of events, rendering, and JavaScript execution.

This feature is useful for debugging long or slow AngularJS digest cycles, high CPU usage, or any areas where AngularJS might be making inefficient changes.

Using the Console for AngularJS Digest Cycle Debugging:

The AngularJS digest cycle is responsible for updating the model and view when there’s a change in scope variables. If the digest cycle takes too long or triggers unnecessarily, it can lead to performance bottlenecks.

To see how the digest cycle works in real-time, you can use $log with console.time() to measure the time it takes for each digest cycle.

$rootScope.$watch(function() {
  console.time('digest');
}, function(newValue, oldValue) {
  console.timeEnd('digest');
});

This will log how long each digest cycle takes in the DevTools console. If you see very high numbers, this could indicate performance issues, such as too many watches, which are common in large AngularJS apps.

6. Network Tab for API Requests

When dealing with data from API calls or backend services, it’s crucial to inspect your network requests and responses. Chrome DevTools has a Network tab that helps monitor and debug these requests.

Inspecting API Requests

Open the Network tab in DevTools.
Reload your application or trigger an API call (e.g., a $http or $resource request).
Check the details of each request, including the request URL, HTTP method, headers, and response payload.

You can also inspect the HTTP status code, response time, and body of the request/response. This helps ensure that API requests are being made correctly and responses are handled as expected.

7. Debugging AngularJS Directives

AngularJS directives are often the source of complex issues. To debug a directive, you can use console logging inside the directive’s link or controller function to inspect its scope, element, and isolated scope.

app.directive('myDirective', function() {
  return {
    restrict: 'E',
    scope: {
      myModel: '='
    },
    link: function(scope, element, attrs) {
      console.log('Isolated scope:', scope);
      console.log('Element:', element);
    }
  };
});

This can be extremely helpful to inspect the state of directives when they are rendered and see if the right data is being passed.

8. Debugging with AngularJS’s `ng-` Directives for Debugging

AngularJS has several useful ng- directives to help with debugging. For example:

ng-app: Marks the root element of an AngularJS application.
ng-init: Allows you to initialize a model directly in the HTML for debugging.
ng-bind: Used to bind an expression to an element.
ng-show/ng-hide: Dynamically show or hide elements based on conditions.

You can use these directives to visually check how data changes as you manipulate the model in real-time.

9. Using AngularJS Developer Tools (Optional)

In addition to Chrome DevTools, AngularJS provides its own set of developer tools. Although AngularJS Batarang may no longer be maintained, tools like ng-inspect or browser plugins can help you inspect data directly within your browser.