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…
@willgmbr: “A Guide To Debugging Angular Applications” by @_VamsiVempati_
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.
.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 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…