Introduction

If you are using NgRx in your Angular project, a must-have is the DevTools. The DevTools are a Chrome / Firefox browser extension that is a UI for inspecting and interacting with NgRx inside of your application.

The main features include a log of all NgRx actions, a State inspector, and a time-traveling debugger.

Benefits

Some benefits of the NgRx DevTools are:

• inspect the state of the application at any moment in time, making debugging much easier
• easy to on-board new developers as they can get a good understanding of how the application works
• immediate visual feedback makes it much easier to understand what’s happening with state

Setup

There are several steps in order to get things going. I routinely forget one or another, so this is a good help to me!

1. Download the Redux DevTools for Firefox or for Chrome. Important to note: If you search “NgRx DevTools” you won’t find anything! The DevTools run off of the Redux DevTools.

2. Install NgRx DevTools in your project:

npm install @ngrx/store-devtools --save

3. Import StoreDevtoolsModule.instrument() into your AppModule:

And that’s it! You should be able to navigate to your Web Developer Tools and see the Redux icon among them. Hopefully, you have some actions you can test out. Either way, you have just made your life a whole lot easier with the DevTools, I promise!