Sharing Top Content from the Angular-sphere.

A Guide To Debugging Angular Applications – Frontend Weekly – Medium

  • AuguryAugury is a Chrome extension that provides a visual representation of the Angular components on a page, their dependencies, router information, whether change detection is used for the component, etc.
  • Conditional breakpointsYou can also use breakpoints on Chrome Dev Tools instead of debugger statement and avoid waiting for the application to compile and refresh for the debugger statement to apply.
  • console objectsLike debugging any other application, console objects can be used in Angular applications too.
  • Pro tip: console.warn() and console.error() will also print the call stack long with the statement, like console objects, can be used in Angular applications as well.
  • Having a debugger statement when the chrome dev tools is enabled, causes the application to break at a point where you placed the debugger statement.

Debugging is key to building any application. One cannot build an application bug-free on the first go. Although there are a few things we could do to avoid creating bugs from a developers point of…

A Guide To Debugging Angular ApplicationsPhoto by Markus Spiske on UnsplashDebugging is key to building any application. One cannot build an application bug-free on the first go. Although there are a few things we could do to avoid creating bugs from a developers point of view, like defensive programming or Test Driven Development, in any non-trivial application, bugs are unavoidable. Knowing how to debug an application is a key skill for developers, and speeds up the process of eliminating bugs and delivering software.

In this article, we will see how to debug an Angular application and the tools available to aid the process. Some of the techniques explained below apply to any JavaScript application while the others are specific to Angular.

.tap()If you are using RxJs operators, you might find that debugging the operator chain can be a bit tricky and having a .tap() between the operators makes it easier to inspect the chain. It gives us the ability to watch the chain without actually modifying it.

tap is the pipeable operator equivalent of do in RxJs version 5.5 and above. The name was changed to avoid conflicts with Javascript keyword do.

tap does not transform the values here but is used to perform some side is a quirky command that we can use on the console to see what the component’s state is. Simply select the component you want to inspect from the Elements tab and execute ng.probe($0).componentInstance on the console. $0 is…

A Guide To Debugging Angular Applications – Frontend Weekly – Medium