How to debug Angular App in Chrome

Debugging is a must to build a stable application. One cannot build a bug-free and resilient application without sound debugging. Debugging is a key skill that serves as the building block for developing any software application.

Angular is a front-end development framework that is written in Typescript and is nowadays highly preferred by developers. It is a TypeScript-based JavaScript platform and has become popular over the past few years in the web development industry.

Let us see how to debug an Angular application using two methods: Chrome DevTools and BrowserStack

Angular and JavaScript bring structure and consistency to web application development and provide maintainability and scalability. There are approximately 100 thousand active Angular Apps websites, and is being used by many giants and popular companies such as Upwork, PayPal, Microsoft Office, Forbes, and  Gmail.

It is proven that Angular today is one of the finest development frameworks in the league of mobile and web application development and we can surely say that the future of Angular is bright enough.

Famous Angular Apps – Source 

How to Debug an Application Using Chrome DevTools

Let us see the steps you can use Chrome DevTools for debugging an application. 

Step 1: Open Chrome and navigate to your Angular app. For example – Upwork. 

Step 2: Right click and choose the Inspect option. 

Step 3: Once you click on Inspect you will see the Chrome Dev tools opening up.

Step 4: You can choose the convenient position of the DevTools using any of the available dock options.

Step 5: You can make use of the Elements tab for inspecting any of the dom elements to check their CSS attributes, styles, IDs, etc.

Step 6: You can use the Console tab for multiple purposes, such as executing any custom JS code, checking the application’s logs for any runtime errors, etc.

Developers can also log messages using console.log in order to inspect the value of any variable or to simply ensure that the code is flowing in the correct order. 

Step 7: You can use the Network Panel to check the entire application’s Network activity.

Network Panel is the place where the application’s entire network activity gets logged. All uploaded or downloaded resources can be inspected in the Network panel. These resources are chronologically listed, such as HTTP response code, initiator, loading time, size, and state. The footer here contains an overall summary of the total number of requests and the size of the resources transferred.

Step 8: You can inspect any of the HTTP requests

This list view in Network tab here helps in easily spotting the failed requests as they are marked in red and those that are pending or may timeout.

When you click on a specific resource here, it further opens a detailed panel where the HTTP headers are shown along with the response. 

You can use these request headers and their corresponding response for debugging any issue in the code further.

Step 9: You can use the Timing breakdown option for each of the individual requests for investigating any performance statistics.

The timing breakdown here can prove to be very useful while investigating requests that take a long time to download, which can be either due to a poor connection between your Angular application and the server or due to a slow backend. 

Step 10: You can use the Lighthouse Report for debugging any performance-related issues. 

If you need any performance statistics, Lighthouse Report can help identify the problems that could be affecting your Angular app’s performance and user experience.

Debugging Applications on Chrome Using Browserstack Live

BrowserStack makes Chrome debugging on Desktop as well as Mobile devices quite effortless. Developers and testers get instant access to Chrome DevTools on their chosen Desktop or Mobile handset. This makes it even easier for them to trace specific bugs on a device.

Maintaining a large variety of devices for testing and debugging is not a cakewalk as it requires a lot of investment and effort in procuring and maintaining them. BrowserStack enables developers and testers to test and debug their websites and mobile applications across 3000+ real browsers, operating systems, and mobile devices.  

Let us test a sample angular app Upwork across different desktop and mobile devices using BrowserStack.

To do this, you need to first create a BrowserStack.

Create a free account on BrowserStack

Follow the below steps to get started

1. Once the account is created, you can navigate to the Live Dashboard.

2. Choose the Operating System; you can choose any of the desired OS from Android, iOS, Windows, or Mac

3. Depending on the chosen OS, you can choose from any supported version and browser. 

4. Clicking the desired browser version will start the session.

5. Once the session begins, you can navigate to the website to be tested and start debugging using DevTools option.

Once the device is initialized, you can start the test. 

Here are a few snapshots of the test performed on different device-browser combinations.

Samsung Galaxy S22 with Chrome 106

Google Pixel 6 with Chrome 

OnePlus 7T with Chrome

Windows 10 with Chrome 106

Mac OS Monterey with Chrome 106

Using Chrome dev tools, you can easily play around with code changes in the DOM and see the actual changes of it reflecting in your Angular app.

Using platforms like BrowserStack empowers teams by providing them with an ideal infrastructure for debugging and testing their applications seamlessly across multiple devices and OS combinations. They do not need to worry about maintaining those devices and can just sign up for free, choose the desired device-browser combination, and start testing. Additionally, using features like Local testing and DevTools on mobile browsers easily helps in debugging critical issues and makes the entire process easier.

Test an Angular App Now