Hello in the AngularJS‌ Development universe! You cannot be called a true developer if you haven’t faced the bugs and errors in your code. I know exactly that of course you have them, so you need to be familiar with the opposite process – the process of debugging.

What is debugging?

Debugging, in software programming and engineering, is a process that requires several steps to do. They involve the following: identifying a problem that usually comes in a form of the feedback from the users; then isolating the source of the problem, and then either fixing the problem or determining a way how to make the things work. The last step of debugging is to provide the testing of the correction and make sure that it works properly.

In software development, the process of debugging starts when a developer finds an error in the code in a computer program. Debugging is a big part of the software testing process and the development cycle in general.

How debugging works in software?

As a rule, the debugging process begins almost at the moment after the code was written. This process goes on and is combined with other units of programming to accomplish a final software product. In a complicated program that has hundreds and thousands of code lines, the debugging process can be provided easier by using specific strategies like unit tests, code reviews and pair programming.

In order to identify bugs, it can be useful to look at the code’s logging and use a stand-alone debugger tool or the debug mode of an integrated development environment (IDE). I’ll explain about the debugging tools later in the context of the topic of this article.

The common development practice in debugging is to set up a so-called “breakpoint” and run the program until that breakpoint, at which the program time execution makes a stop. The debugger component of an IDE usually makes the programmer capable to view the memory and to see variables, to run the program to the next breakpoint, to execute just the next line of code, and, sometimes, to change the value of variables or even to change the whole content of the code line that is about to be executed.

Why is debugging important?

Debugging is indeed a vital part of development, because it can help to determine, for example, why an operating system, an application or a program is working badly. Even if developers use the same coding standard, it’s more than possible that a new created program will still consist of some bugs. In many cases, the process of debugging a new application can last longer than it took to create it.

Debugging tools

Now, we came to the point about the debugging tools. In this case there exists such a thing as a debugger.

A debugger is a software tool that can help within the software development process by determining any coding errors at different stages of the application development.

Some of the debuggers first run a testing in order to identify what lines of code were not executed; then begins the automatic process of analyzing this testing. Other existing debugging tools provide simulators that allow the programmer to model a virtual construction of how an app will work and behave on a certain operating system or device.

AngularJS debugging in Chrome

Now, let’s gain an understanding about how to set up the process of debugging AngularJS in Chrome browser.

Actually, you can do the debugging in two ways. The first one is debugging from the DOM. Although it is not always necessary, we can get the access to the Angular properties that are attached to any of the DOMs’ elements. We can use these properties to peek into how the data is flowing in the application. However, you should never rely on the properties from a DOM element during the lifecycle of an application.

That’s why there is a second way of debugging that is much more easier and reliable. Google Chrome has its own debugger tool to create a breakpoint in the code. The debugger statement will freeze the browser during the execution, allowing the developer to examine the running code from inside the actual application and at the point of execution inside the browser.

To use the debugger, you can simply add this running code inside the context of the application code. As long as the Chrome development tools are opened in your browser, you can use console.log() and other JavaScript commands at the point where this application code executes.

When you’re done with debugging the application code, you need to make sure that you have removed this line, because it will freeze the browser, even if it is launched and still works. The next steps will be performed by the Angular Batarang.

Angular Batarang

Angular Batarang is a Chrome extension developed by the Angular team that belongs to Google. It integrates very nicely as a debugging tool for Angular apps.

To install Batarang, you simply need to download the application from the web store or from the GitHub: github.com/angular/angularjs-batarang.

Once the installation is set, you can start up the extension by navigating to the developer tools and clicking enable to launch Batarang in order to start collecting debugging information about the app or the webpage.

Batarang allows you to look at scopes, performance, dependencies, and other key metrics in Angular apps.

To start the debugging process with the help of Batarang, follow these first steps:

  1. Open your AngularJS application in Chrome
  2. Go to Tools > Developer Tools or press F12. You’ll find there is a new “AngularJS” tab.
  3. Click the “Enable” checkbox.

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

Batarang in action

Models Tab


Type the user name, for example ABC, and click “Scope (003)”. You’ll see the information in “Models for (003)”.

Then click the “Add Users” button and “Scope (003)” will be updated.

Notice that there is another “Scope (004)” element that has been created. Click on that and follow the further steps that it shows you on the screen.

This “u:ABC” is part of ng-repeat (refer to the user.html code).

Click the “Enable Inspector” button, + sign and hover over element(s). You’ll notice pop-ups that appear up there itself.

Options Tab


If you want to see where the scope is applied in your page, click “Show Scopes” and similarly “Show Bindings” for details.

After all these steps are done, the debugging process is finished.

Conclusion


To sum up, the debugging process is a necessary part of each software development. The easiest way to debug AngularJS apps in Chrome is to use its debug tool Angular Batarang developed by Google.