Debug Angular (2), In Browser - DevTools

This series of articles will discuss debugging for Angular App.

• Debug Angular (1), In VS Code
• Debug Angular (2), In Browser --- DevTools --- this article
• Debug Angular (3), in Visual Studio

This article will demonstrate how to debug Angular in Browsers, Google Chrome, Microsoft Edge, and Firefox, with DevTools.

Introduction

I wrote an article, Debug Angular In VS Code, on Feb. 15, 2021 with cumulated viewing of 98K till today (11/05/2022), which means the article is quite welcome by readers, most of them are Angular developers.  

I have been a C# developer for a long time period, and I am quite familiar with Visual Studio environment.  When I switch to be a developer of Angular, I definitely want to leverage my Visual Studio skill, for developing Angular. However, years ago, Visual Studio Environment did not support Angular development although the VS 2022 has a Standalone Typescript Angular Project, which we will discuss in Debug Angular (3), so it is reasonable that developers would try to use VS Code to simulate debugging experience as Visual Studio.

Recently, I occasionally used DevTools when I debug one Angular project, I feel that the debugger is quite user-friendly and quite similar to the debugger in Visual Studio. I will introduce it in this article.

In the previous article, Debug Angular In VS Code, the major part is to introduce the debugger plugin, the installation, and setup.  For DevTools, we do not need to install or setup.  So I will introduce what DevTools is, and then how to use it straightforwardly:

• Introduction
• Web development Tools --- Introduction of DevTools
• Debug Angular in Browser --- Locally
• Debug Angular in Browser --- Remote

Due to debugging an Angular App locally and from a remote server being quite different, we made them as two parts.

Web development Tools --- Introduction of DevTools

The following introduction is from wiki, although I did not see the DevTools history info, I think this tool has been at least lasting since 2010.

Web development tools (often called devtools or inspect element) allow web developers to test and debug their code. They are different from website builders and integrated development environments (IDEs) in that they do not assist in the direct creation of a webpage, rather they are tools used for testing the user interface of a website or web application.

Web development tools come as browser add-ons or built-in features in web browsers. Most popular web browsers, such as Google Chrome, Firefox, Internet Explorer, Safari, Microsoft Edge and Opera,[1] have built-in tools to help web developers, and many additional add-ons can be found in their respective plugin download centers.

Web development tools allow developers to work with a variety of web technologies, including HTML, CSS, the DOM, JavaScript, and other components that are handled by the web browser. Due to increasing demand from web browsers to do more, popular web browsers have included more features geared for developers.

Debug Angular in Browser in Local

The Browsers I used are both 

• Microsoft Edge Version 106.0.1370.52 (Official build) (64-bit) and 
• Google Chrome Version 106.0.5249.119 (Official Build) (64-bit)

I assume the versions are the current today on 11/05/2022. Because of the Environments and Behaviors of both, I even did not distinguish them.  So the dome below could be from either of them.  And I assume the conclusion is the same in Firefox. 

• Step 1: Open Browser DevTools;
• Step 2: Open Console Tab;
• Step 3: Open Source Code with Issues;
• Step 4: Make Break Points and Debug;

Step 1 - Open Browser DevTools

When we run a web app, such as Angular, Right Click on anywhere in a browser => Inspect

to open the DevTools, such as

Step 2 - Open Console Tab

Click Console, If there are some bugs existing, we can see the Error messages in Red:

Step 3 - Open Source Code with Issues

Click the top link, on the errors:

We will see the error code file opened, in Angular, under source tab with the error in yellow (very short time) within the method, such as here below: getNotification:

Click the second top link, on the console page:

we got the error message code highlighted in method: saveNotification:

Click the third top link, on the console page, and we got:

Step 4 - Make Break Points and Debug

Make some breakpoints in the source code file, then we can debug the Angular app in browser, similar to Visual Studio:

This is a similar page, but from Google Chrome:

On the app page of the browser, there still is a running button, you can click to continue to run the app:

In fact, we can access the Angular code through the folder WebPack:

Debug Angular in Browser in Remote

A page from a remote server (no local), is similar to local one, you will see the error messages when there are bugs existing:

However, even for the same Angular app, the deployed app at server is compiled into JavaScript (by command Build), when you click the link in an error message page, you will see

That is a javascript file.

If there is no error on the Console Tab, and if we want to see the code, Click left pane JavaScript file, you will get one line source code, such as:

Click the curly brace icon, Pretty print scripts, on the left bottom of the debugger, then you get the normal JavaScript,

For the remote server debugging, 

• Disadvantage --- we cannot debug the Angular original Source code, but a compiled JavaScript Code.
• Advantage --- Using this way, we can debug not just Angular, but any Web Apps whatever the language is used.

Summary

We demonstrated how to debug Angular in Browser in this article.  The method introduced here will work for all apps developed in any language.

References

• Debugging in the browser (javascript.info)
• Learn How To Debug JavaScript with Chrome DevTools | by Brandon Morelli | codeburst
• Modern web debugging in Chrome DevTools - Chrome Developers
• About the list of tools - Microsoft Edge Development | Microsoft Learn
• Overview of DevTools - Microsoft Edge Development | Microsoft Learn
• Get started debugging JavaScript - Microsoft Edge Development | Microsoft Learn
• Overview - Chrome Developers