Useful Tools For Developing Angular Apps

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)

GraphQL DevTools

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.

Augury

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.