Whenever you write the debugger in your source code, it causes the application to break at a point. This is useful to show the current stack in your application before the break point is defined.

You can show the current value at the point where the break point is triggered while using this keyword in the Chrome DevTools.

Console Objects is generally used in a development environment to view the data flow in the application. The console serves at least two purposes: viewing your application logs and runtime errors and the ability to run customized JS code. There are different ways to use the console at different levels of information.

If you use local storage to save the state of your application, you can use the application tab to inspect the state of the local storage. You can erase local storage data of your application by right-clicking on the application under local storage and choosing the option to clear.

You can use the following command to set the values in the local storage. localStorage.setItem( );

You can also get and remove the item from the local storage.

This is an easier and faster alternative to using console.log () if you are looking for bugs. It enables a quick inspection of the executed code and the values of the variables at that time. The execution is stopped when it reaches the breakpoint. You can set multiple breakpoints at the same time.

If you have a JSON object that you want to print the value on the page for debugging, you can use the JSON pipe along with the JSON object.

You can also use the async pipe with the JSON pipe.

Augury is the most popular Developer tool extension for visualizing, profiling, and debugging angular applications in the Mozilla Firefox and Google Chrome browsers. You can view the current state of the component, you can view the component tree of the angular application using Augury. It can be used to show the source of the component by clicking the view source link next to each component.

It is a DevTools command useful for viewing the current state of the component. On the Inspector tab, select the element, then navigate the console tab and execute the following command.

The ng.probe takes a single parameter: $0 to view the last selected element. You can use the other parameter: $1, $2, $3, and $4 for the last four selected elements.

Angular runs on the development mode by default. You have to execute an angular application in production mode with the enableProdMode function to disable debugging.

Angular skips a lot of things during execution in the production mode like

tap ():

You never know which value will be pass, when you use pipe operators at that time debugging observables is knowingly tricky. RXJS introduced the tap operator, previously called do (renamed because of naming conflicts with the JavaScript keyword). Tap operator can be placed between the pipe operators. It enables us to observe the chain without changing it.

Debugging using editors is easy and great. IDEs and Editors such as WebStorm and VS Code can be configured for debugging angular applications.

Angular has a built-in profiler that can be used to profile your angular application. Profiler stores the amount of time it takes to execute change detection in the application. It offers just one type of profiling - timeChangeDetection().

You can also save this profiling for deeper analysis by passing an argument. To save profiler, run this command.