# 17. Store dev tools

## 1. Install redux dev tools chrome extension

​<https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en>​

![Image: Redux devtools extension](https://blobscdn.gitbook.com/v0/b/gitbook-28427.appspot.com/o/assets%2F-LBrKUK581lwLgG0REVS%2F-LBrWXz_gT2F_dhtsHjY%2F-LBrWZGbEsvKZH3Tzwjq%2Fredux-dev-tools.png?generation=1525644940724530\&alt=media)

## 2. npm install the ngrx StoreDevtools

* npm install the store dev tools that expose our reducers to the chrome extension.

```
npm install @ngrx/store-devtools
```

## 3. Register the StoreDevtoolsModule

* Register the `StoreDevtoolsModule` in our `AppModule`.
* Name our app in the config to know which app we are dealing with in the browser extension.
* Also disable all the expensive compute and memory heavy functions of the devtools when we are in production to only allow logging.&#x20;

{% code title="src/app/app.module.ts" %}

```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';
import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
import { StoreModule } from '@ngrx/store';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';

import { HomeComponent } from './home/containers/home/home.component';
import { AppComponent } from './app.component';
import { InMemoryDataService } from './app.db';
import { reducer } from './state/spinner/spinner.reducer';
import { environment } from '../environments/environment.prod';

@NgModule({
  declarations: [AppComponent, HomeComponent],
  imports: [
    BrowserModule,
    RouterModule.forRoot([
      { path: '', pathMatch: 'full', redirectTo: 'home' },
      { path: 'home', component: HomeComponent },
      { path: 'event', loadChildren: './event/event.module#EventModule' }
    ]),
    HttpClientModule,
    HttpClientInMemoryWebApiModule.forRoot(InMemoryDataService, {
      delay: 1000
    }),
    StoreModule.forRoot({ spinner: reducer }),
    StoreDevtoolsModule.instrument({
      name: 'NgRx Demo App',
      logOnly: environment.production
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

```

{% endcode %}

## 4. Run the app and explore the dev tools in the browser

![App running the store devtools](https://3531511677-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLqc06ABPywqowC_y8E%2F-LMHTqpYxPa-QwHN5x9g%2F-LMHTreo7cqduruE3qgS%2Fimage.png?alt=media\&token=9ef39402-106c-47b6-a4d4-b2e1429fa481)

## StackBlitz Link

{% embed url="<https://stackblitz.com/github/duncanhunter/angular-and-ngrx-demo-app/tree/17-store-devtools>" %}
Web Link: Link to the demo app running in StackBlitz
{% endembed %}