How to enable @ngrx/store-devtools for on-device remote debugging

rob3c · October 29, 2016, 12:58am

Hi all,

I’m experimenting with @ngrx/store in my Ionic 2 app, and the @ngrx/store-devtools work well to monitor the store state changes when running in the browser via ionic server. Unfortunately, it doesn’t work when deploying to devices, since it relies on the Redux DevTools Chrome extension to be attached to the global window object (i.e. running in the same browser).

However, the Redux DevTools browser extension does support a remote mode via the Remote button, and a made a simple proxy to allow on-device debugging for deployed apps. Here’s a link to the gist where I detail the setup, in case anyone else is interested:

gist.github.com

https://gist.github.com/rob3c/c2c4dcc1116f94901ace179722c5f6d4

ngrx-remote-devtools-proxy-instructions.md

Ok, I have on-device remote store debugging working with Ionic 2. Unfortunately, time-travel and state import doesn't work with `store-devtools` yet (see https://github.com/ngrx/store-devtools/issues/33 and https://github.com/ngrx/store-devtools/issues/31), but at least the Inspector, Log Monitor and Graph is working remotely. Here's how:

First, add https://github.com/zalmoxisus/remotedev to the project:
```
> npm install --save-dev remotedev
```

Then add these devtools proxy wrapper classes to the project. They provide the same interface as the browser extension so store-devtools will think it's just talking to the chrome extension. I left in the trace debug logging so you can clearly see what's happening in the console, but it's easy to remove if you want.

### remote-devtools-proxy.ts

This file has been truncated. show original

Cheers,
robert