Debugging Angular Applications: Console API & Breakpoints

Learn how to debug an Angular application using the console API & breakpoints.

We'll cover the following

Sometimes, errors in an Angular application are difficult to spot and fix. We must debug the application to find and fix them in those cases. In this lesson, we will learn how to debug an Angular application.

We can debug an Angular application using standard debugging techniques for web applications or the tooling that the Angular framework provides out of the box. Both approaches should work the same, and the choice depends on the use case. In this section, we will learn about the following debugging methods:

  • Use the console object to print data and messages to the browser console.

  • Use the browser developer tools to add breakpoints in the application source code and inspect it.

  • Use the Angular DevTools extension for debugging and profiling.

We will start by learning how to use the console object for debugging purposes.

Using the Console API

The console object is the most commonly used Web API for debugging. It is a very fast way to print data and inspect values in the browser console. To inspect the value of an object in an Angular component, we can use the debug or log method, passing the object we want to inspect as a parameter.

We have already used the console object in several chapters of this course for demonstration purposes. However, it is considered an old-fashioned approach, and a codebase with many console.log methods is not readable. An alternate way is to use breakpoints in our source code, as we will learn in the following section.

Adding breakpoints in the source code

We can add breakpoints inside the source code from the browser developer tools and inspect the state of an Angular application. When an Angular application runs and hits a breakpoint, it will pause and wait. During that time, we can investigate and inspect several values involved in the current execution context. We will see how to add breakpoints in Google Chrome using an example:

  1. Click the “Run” button to start the application.

  2. Navigate to the following link:

Get hands-on with 1200+ tech skills courses.