4 Ways to debug Angular Application

Debugging is very important for developers. It is as important as programming itself. It is very important to make use of tools and techniques to get rid of bugs within your codebase. In this article we will see some methods on how to debug angular application. The angular framework has some popular methods to debug angular application that we will see now.

1. Debug Angular with Typescript

Whenever we are coding in Typescript we are actually lowering our risk of generating bugs in our application.

How? Let’s see that!

Here, In JavaScript I have created a variable called employee. Then I have created a function called createEmployee() and given the parameters name and height. And this function will return name which is type of name and, height which is type of height.

Below that I have defined the value of that object as a function having the name and height. Now if I give the type of this employee as string then it will create a bug in running time. As the object employee is type any because we have not given any type here and after that we are assigning a different type which is string. Even if we change the value of this height to string which is number type right now it will still not give us any kind of error here.

But, Typescript is based on data type. So it will not allow us to give another type to employee.

Let’s see in Typescript file.

Here, this is a Typescript file. In the constructor I have defined the type of name and height. And in the function createEmployee, I am returning the same name and height. Just below that I have created a variable called employee and given the value of createEmployee.

So if I try to assign value of height as a string then it will not allow me to do that because I have already given the data type of that height as number so it will not allow me to give the value of type other than a number. Also, if we try to give the property to this employee that does not exist then also it will throw an error in my editor only.

2. Debug angular in VS code

The another way we can debug angular application is by using VS code.

App.component.html

Here is my app.component.html file in which I have made two inputs and one button. And I am calling a function called click() by clicking this button.

Now, I have also used ngModel directive with two-way data binding to pass the data in both ways to firstname and lastname variable. At last I have binded full name by using interpolation binding.

Click here to know more about ngModel and how it works.

app.component.ts

And here I have made variables and function called click() which will be called by clicking that button. Now, what I am trying to do here is whenever I click on this button I want my full name visible here in full name section.

Now in order to do debug angular we need to install the extension called ‘debugger for chrome’.

You can find it in extensions tab by searching it.

Now, open it and click on install tab to install it in your VS code.

Now here in 15^th line I have added a debugger in function click() by just clicking on that line. So, whenever I start debugging it will stop at line number 15 here. It will show us that in VS code as well as in browser also.

In order to start debugging you can press ‘ctrl+shift+d’ and the debugging option will pop up in your VS code. If you click on this this second highlighted tab then also it will open that for you. Now, click on that tab to start debugging your application in VS code. When you start debugging it will ask you which browser you want to use to debug your application. In that you select chrome browser.

After starting debugging the browser automatically opens your application.

But, before starting debugging don’t forget to edit launch.json file. Edit the port number in url in which you are running your application.

Now, when you click on this button ‘click here’ your application will stop at that function as we have sated a debugger at that function. And you will see this kind of pop up in browser.

You can also see that in VS code. And click here on highlighted tab in order to move to next.

So, by this we can debug our application in VS code itself. It is good to keep our debugging in our editor only so that we don’t need to jump from one to another and we can clearly see that where our code is getting wrong.

3. Debug Angular in Browser

Debugging angular your application in browser is very easier. As we did it in VS code, the same thing we need to do in browser. Let’s see how we can do that.

Open your application in browser and open source section. In that you can find app.component.ts file in the folder called webpack. You can set debugger at anywhere by clicking at that line as I did in 15^th line. Now whenever you click on that button this function will be called. And because of this debugger your application will stop there.

Now, in order to move further click on this tab and move to another debugger. Or you can stop your debugging process.

click here to know more about debugging in browser.

4. Augury

Augury is the most used developer tool extension for debugging and profiling Angular applications inside the Google Chrome and Mozilla Firefox browsers.

Augury is not just a debugger but you can visualize the application through component trees and visual debugging tools. You can also get immediate insight into your application structure. In order to use Augury you first need to install that from https://augury.rangle.io/ . You can install it on both chrome and Firefox.

When you open that in browser you will get the structure of your application.

Here we haven’t used multiple components. But it will show entire structure of your application. In this if I pass the values in this input boxes that will also be shown in augury.

I have given the value to these two input boxes and it is visible in state here. So in augury you can see which values are actually getting passed through your function. And you can see the clear picture of your application.

So, these are the 4 most popular ways by which we can debug our angular application.