Developer Docs

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:

NGRX example

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.

GraphQL example

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.

state inspector example


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.

Augury example

Was this article helpful?

Thanks for your feedback!

If you would like to tell us more, please click on the link below to send us a message with more details.







On this page

New to Codebots?

We know our software can be complicated, so we are always happy to have a chat if you have any questions.