Debug Angular (2), In Browser

Note: This article is published on 11/07/2022.

This series of articles will discuss debugging for Angular App.

Debug Angular (1), In VS Code by Debugger for Chrome
- Debug Angular (1-1), In VS Code by Debuggers for Chrome New
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, and I am quite familiar with Visual Studio environment. When I moved 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

Debug Angular In Browser

Step 2 - Open Console Tab

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

Debug Angular In Browser

Step 3 - Open Source Code with Issues

Click the top link, on the errors:

Debug Angular In Browser

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:

Debug Angular In Browser

Click the second top link, on the console page:

Debug Angular In Browser

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

Debug Angular In Browser

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

Debug Angular In Browser

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:

Debug Angular In Browser

This is a similar page, but from Google Chrome:

Debug Angular In Browser

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

Debug Angular In Browser

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

Debug Angular In Browser

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:

Debug Angular In Browser

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

Debug Angular In Browser

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:

Debug Angular In Browser

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

Debug Angular In Browser

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