This article is about an important part of any Angular development process – testing or, in other words, debugging Angular apps in Chrome.

Debugging is easily one of the most annoying and frustrating aspects of a programmer’s life. But take an advantage from this – one of the great things about Angular is that it uses TypeScript by default which prevents many of the bugs that collect JavaScript applications. It does it by allowing you to write JavaScript code with static typing as opposed to dynamic typing. This just means that you define the data types and properties of objects before they are actually used in the code.

So, why is this beneficial?

 The number one reason is that it allows your text editor to give you instant feedback whenever you’re about to introduce a bug into your code. Let’s imagine a simple JavaScript code that opts out of all of TypeScript strong typing features.

let animal

function createAnimal (name, size) {

return

species; name,

size: size

animal = createAnimal (‘Canine’, 500)

 An animal should always be an animal object. But what if we define it as a string? Will we get an error? In this case we don’t because an animal variable can be assigned to any data type, so we wouldn’t actually see its fail until runtime.

Inspect Tool

 Well, imagine any webpage. On the surface all we see is a bunch of text with images and videos. But underneath that it is made up of HTML, CSS and JavaScript code. And the Inspect tool is an easy tool that lets the user interact with those codes.

It is understandable to use the Inspect element if you are a web developer. With the help of it you can test any Angular app in Chrome whether it is working properly or not. In simple words, if you know how to use the Inspect element option, you can do pretty cool stuff in your browser.

How can you test the app with the Inspect tool?

 There are several ways to check the work of your app.

•  The first way to do it is to check whether you can download anything. And this is exactly one good thing about the Internet: if you can see it, you can download it. I mean, if you can see an image on the screen or a video, you can easily download it on your system, even if the website does not allow you to do that.

For example, you want to download the cover image of any Twitter profile. Like always, there is no direct way to do that. But you can right click on the cover image and choose Inspect. You’ll see the server link of the image. Copy paste it in the new tab and download it.

• The second use of the Inspect tool is to test if it can reveal the password if you forgot it. Maybe, many of the developers already know it, but this trick is so helpful, that it’s worth mentioning one more time.

Say, you want to login to Amazon’s mobile app, but you don’t remember the password. Thankfully, it’s saved on your browser’s password manager. Although the browser hides the password in dots, you can still easily reveal it using the Inspect element. Simply right click on the password field and open Inspect elements. Then scroll the pointer till you reach the password field highlighted. Then open the div tag and under input type replace the password with text. Click on the webpage and your password is now visible in plain text.

• One more way to test Angular with the Inspect tool is to monitor whether it can show the hidden content. I have nothing against paying for the web researched content and I like to support the owner, but sometimes these things can go overboard.

For example, let’s take a popular website with articles. Let’s say, I want to read the article, but unfortunately it’s hidden behind the paywall. If I want to read one article, then it doesn’t make any sense to pay for the entire month. So, here is what you can do.

Right click and select Inspect. Now, go to the element tab and click on the cursor icon. Then place the cursor on the pop-up box. Go to the inspector at the bottom and delete the highlighted part. There we go.

• The ability to change the website content is an index that the Angular app is working well. Although this is a temporary change, still making the web page editable ensures us in the proper work of the application.

What are the alternative ways to test the Angular application in Chrome?

1.  One of the popular debugging tools is the Debugger statement from JavaScript. A Debugger statement will stop the execution of JavaScript, which essentially allows you to pause your application at any point to inspect it. Take a simple code, and we are going to add a debugger to the constructor and also inside of the rxjs subscription.

Go to the app and see what happens. When it hits that constructor, it pauses the app right here and brings up the file that we’re trying to debug. Then we can hit the play button and it will once pause again the application when it hits that subscription. This can be useful when you’re not sure exactly which component or service is causing the bug.

2. The next debugging tool is JSON Pipe. This is something you can use to inspect data directly in the HTML. It’s especially useful when you’re not sure exactly what an object looks like after retrieving it from a database or a third party API. If we go to the app, we can see that all the properties in the item are listed in JSON format.
3. Console debugging is a popular Angular testing tool. To enable it, we’ll need to make some adjustments to the main.ts file. After we bootstrap the app, we’ll have to enable debug tools on the app component itself.

The first thing we’ll do is use ng probe which allows us to extract information from a component in the DOM. So, we do that by clicking on the component itself first in the HTML. Then we can use ng.probe$0 and that will give us this debug element back which has a bunch of information about the component itself.

The other cool thing we can do is run a change detection profile, which should happen very fast. In this case it only takes 0.05 milliseconds per change detection cycle.

4. Now let’s take a look at the Augury plugin for Chrome. If you don’t already have this in Chrome, go to the Chrome Web Store and get it – it’s free and very powerful. It gives you a visual picture of the apps components and services, so you can easily debug things like sharing data between child and parent components as well as dependency injection with service.

It also gives you a visual breakdown of your router, so you can see exactly which components are being imperatively loaded. Lastly, it gives you a breakdown of your ng modules. This is a lot more efficient than looking at each file individually.

5. Another strategy for debugging is to create your own custom logger (Angular logger). This allows you to prioritize and customize the errors that you see in your app. Install it by running NPM install angular 2-logger. Import it into the app module and as it’s a service, we’ll add it to that provider within that module. Then we can inject it into a component, just like any other service and start logging messages with various priorities. In this case we’ll make an error and a warm message. If we go into the console, we can see that we get these two different messages with different priorities.

Conclusion

 To sum up, that’s it on Angular testing with the Inspect tool. You should also try some alternative ways for debugging that may also be crucial in your web development.