The following scenario can be found in the code repository under Chapter9/DevTools.

There are three things we need to do to get DevTools to work:

• Install the NPM package: npm install @ngrx/store-devtools --save.
• Install the Chrome extension: http://extension.remotedev.io/. This is called the Redux DevTools extension.
• Set it up in your Angular module: this requires us to import DevTools into our Angular project.

Providing we have done the two first steps, we should only have the set up stage left, so we need to open up the app.module.ts file for that:

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { StoreModule } from "@ngrx/store";
import { AppComponent } from "./app.component";
import { counterReducer } from "./reducer";
import { StoreDevtoolsModule } from '@ngrx/store-devtools';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    StoreModule.forRoot({
      counter: counterReducer,
      StoreDevtoolsModule.instrument({
        maxAge: 25 // Retains last 25 states
      })
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Ok, so now everything is set up and we are ready to take our application for a spin and see what our debug tool can tell us. Let's start up our application with ng serve and surf to http://localhost:4200/. First thing we want to do is open developer tools in Chrome and click on a tab called Redux. You should see something like this:

To the left we have our application UI, and to the right we have our Redux plugin. At this point, no actions have been carried out other than the initialization of the store, which we can see under the plugin part marked as Inspector. There is but one log entry, @ngrx/store/init. Let's interact with the UI by clicking on the Increment button and see what happens with our store:

As you can see, we have a new entry called INCREMENT. Two things are of interest now from a debug perspective:

• What actions were dispatched?
• What impact did these actions have on the store?

We learn the answer to both these questions by interacting with the tab buttons on the right-hand side of our plugin. The button called Action will tell us what action was dispatched and what payload it had, if any:

Here, it is clearly stated that an action with type value Increment was dispatched. Now to our second question; what was the impact to our store? To find that out, we simply click the State button:

Our state tells us it consists of three properties, count, todos and jediList. Our count property has the value 1, and is the one affected by us clicking the Increment button. Let's hit the Increment button a few more times to see that really is the case:

We now see that our count property has the value 3, and we have three entries of Increment actions. 

Now let's talk about a really cool feature, time-travel debugging. Yes, you read that correctly, we can control time in our store by replaying dispatched actions, and even change history by removing dispatched actions, all in the name of debugging. The Redux plugin gives us several ways to do this:

• Click on a specific dispatched action on your left, and choose to skip dispatching it
• Use a slider to control and replay all the events, and traverse back and forth in time as you see fit  

Let's investigate the first way — click on a specific action:

Here we've clicked on the Skip button for one dispatch action and the end result is that this dispatched action is removed, which is indicated by the action being overstricken. We can also see that our count property now has the value 2, as the action never took place. We can easily toggle this back if we want to by hitting Skip again.

We mentioned there was another way to control the flow of dispatched actions, namely by using a slider. There is a button called Slider that toggles the slider. Clicking it results in us being shown a slider control with a Play button, like so:

If you press the Play button, it will simply play all the dispatched actions. However, if you choose to interact with the cursor on the slider itself you are able to pull it both to the left, to move back in time, and to the right, to move forward in time.

As you can see, the Redux plugin is a truly powerful tool to use in order to quickly gain an understanding of the following aspects:

• What your app's state is at a given point in time
• What part of the UI leads to what effects in the store