How to debug Angular App in Chrome

Debugging is an crucial step in building racy Angular applications. Chrome DevTools render powerful feature that do it easier to inspect components, suggestion errors, and fix issues efficiently.

In this guide, we ’ ll display you how to debug Angular apps in Chrome to streamline development and improve code quality.

How to Debug an Application Using Chrome DevTools

Let us see the steps you can use Chrome DevTools for debug an coating.

Step 1: Open Chrome and sail to your Angular app. For example & # 8211; Upwork.

Step 2: Right detent and choose theInspect option.

Step 3:Once you click onInspect 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 get use of theElementstab for inspecting any of the dom elements to check their CSS attributes, style, IDs, etc.

Step 6: You can use the Consoletab for multiple purpose, such as executing any custom JS code, checking the application ’ s logs for any runtime fault, etc.

Developers can also log messages using console.log in order to scrutinize the value of any variable or to simply assure that the codification is flowing in the correct order.

Step 7: You can use theNetwork Panelto ensure the entire application ’ s Network activity.

Network Panel is the place where the covering ’ s entire network activity gets log. All upload or downloaded resourcefulness can be inspected in the Network panel. These imagination are chronologically listed, such as HTTP reaction code, instigator, lade time, size, and state. The footer here contains an overall summary of the entire figure of requests and the sizing of the resources transferred.

Step 8: You can audit any of the HTTP asking

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

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

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

Step 9: You can use the Timing breakdown option for each of the case-by-case requests for investigate any execution statistics.

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

Step 10: You can use theLighthouse Reportfor debugging any performance-related topic.

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

How to Debug Angular Apps with Angular DevTools

Pro tip: Tools like SUSA can handle this autonomously — upload your app and get results without writing a single test script.

Angular DevTools is an official Chrome extension designed specifically to help developers debug and profile Angular applications. Here is how you can debug Angular apps with Angular DevTools:

Install Angular DevTools

• Go to the Chrome Web Store.
• Click “ Add to Chrome ” to instal the Angular DevTools propagation.

Open Your Angular Application

Launch your app and guarantee it runs in development mode (not production), as Angular DevTools solely work with ontogenesis builds.

Unfastened Chrome DevTools

• Right-click anywhere on the page and select “Inspect”, or pressCtrl+Shift+I(Windows/Linux) orCmd+Option+I (Mac).
• Navigate to the “Angular” tab that appears in the DevTools panel.

Start Debugging

• Use Component Explorer to view the app & # 8217; s component construction.
• Inspect component inputs, outputs, and state.
• Use Profiler to analyze execution and understand change spotting behavior.

Debugging Applications on Chrome Using Browserstack Live

BrowserStack makes Chrome debugging on Desktop as well as Mobile devices rather effortless. Developers and quizzer get inst access to Chrome DevTools on their chosen Desktop or Mobile handset. This makes it even easier for them to trace specific glitch on a twist.

Maintaining a declamatory variety of devices for testing and debugging is not a cakewalk as it requires a lot of investing and effort in procuring and maintaining them. BrowserStack enables developers and testers to test and debug their site and mobile applications across 3000+ real browser, control system, and mobile device.

Let us test a sampling angular app Upwork across different desktop and mobile device utilize BrowserStack.

To do this, you need to first create a 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 hope browser version will start the session.

5. Once the session begins, you can sail to the site to be tested and commence debugging using DevTools option.

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

Here are a few snapshot of the test performed on different device-browser combination.

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

Conclusion

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

Using platforms like BrowserStack empowers squad by ply them with an idealistic infrastructure for debug and testing their applications seamlessly across multiple device and OS combinations. They do not need to worry about maintaining those devices and can just, choose the desired device-browser combination, and start screen. Additionally, using features like Local testing and DevTools on mobile browsers easily helps in debug critical issues and create the entire summons easier.

Frequently Asked Questions

1. How to Check Angular Version in Chrome Console

Here ’ s how you can check your Angular Version in Chrome Console

1. Open the Angular app in Chrome.

2.Then, Open Chrome DevTools and:

• • Right-click on the page and select & # 8220; Inspect & # 8221;
    or
  • Press Ctrl+Shift+I (Windows/Linux) or Cmd+Option+I (Mac).

3.Go to the Console tab and enter the command

ng.version.full

2. How to view Angular source codification in browser?

You can view Angular beginning code in the browser by postdate the steps below:

• Open Chrome DevTools by right-clicking and selecting Inspect.
• Navigate to the Sources tab.
• Go to the webpack: // or ng: // folder(if source map are available).
• Explore the app ’ s TypeScript files, components, and services.

Related Guides