Having the correct tools available to be able to successfully debug your application is one of the most important requirements. This article will explore a collection of tools which can be used to debug Angular applications.
Redux Dev Tools Extension
If your application makes use of NRGX, such as SpringBot does, then the redux-devtools-extension is one of the most useful tools to have.
It is available for both Chrome, Firefox and Electron.
This extension is incredibly powerful in that it allows us to take advantage of one of the primary benefits of using client-side state management, controlled state.
With this extension we can achieve the following plus much more:
- View all actions as they are dispatched
- View state changes as they occur
- View current state of application in its entirety
- Rewind state (step backwards through actions)
One of the most popular challengers in the API space is GraphQL, it differs from REST API’s in that it provides a query language for requesting data from your server. While the existing in-built network tools that can are found within all major browsers do allow us to view our requests, the structure of them can be difficult to manually parse.
GraphQL Dev Tools is available for both Chrome and Firefox.
Angular State Inspector
Each Angular component has its own internal state. This state impacts how it reacts to input and what it provides as output. Understanding this state is important for tracking down bugs and defects, as well as developing new features.
The angular-state-inspector allows us to easily view this state. It is available for both Chrome and Firefox.
Similar to the Angular State Inspector, Augury grants the ability to visualise and debug your Angular application at runtime.
It is available for Chrome and Firefox.
Last updated: 19 June 2020