v2.1.0

Support Electron DevTools extension

Thanks to @jhen0409 and @lestad for implementing this! You can use it with electron-devtools-installer along with React Devtools and other extensions. The only issue is that Import button doesn't work.

Updated API

window.devToolsExtension.updateStore now have optional instanceId parameter required when having multiple instances (stores) in one tab.

Fixes

• Fixed support for multiple instances (stores) in one tab.
• Include stack trace when throwing an exception in Chrome Devtools panel.

v2.0.1

Added window.devToolsExtension.updateStore(store) method

Use with Redux Saga or store enhancers which change the store object. Specify a new store object to be used by the extension. For example, in case of Redux Saga we can use like this:

const sagaMiddleware = createSagaMiddleware();
const store = createStore(
  reducer,
  compose(
    applyMiddleware(sagaMiddleware),
    window.devToolsExtension && window.devToolsExtension()
  )
);
sagaMiddleware.run(rootSaga);
if (window.devToolsExtension) window.devToolsExtension.updateStore(store);

See the example.

Added serializeState / serializeAction config parameters

Use to customize serialization, for example, to support mori data structures or ES2015 Maps.

• serializeState(key, value): transformedState (function) - optional serialization function (useful if state is not plain object)
  Example of usage:

    const store = Redux.createStore(reducer, window.devToolsExtension && window.devToolsExtension({
      serializeState: (key, value) => (
        value && mori.isMap(value) ? mori.toJs(value) : value
      )
    }));

• serializeAction(key, value): transformedAction (function) - optional serialization function (useful if actions are not plain object)

v2.0.0

Support multiple Redux stores in one tab

To identify stores you can pass the instanceId parameter to the enhancer: window.devToolsExtension({ name: 'Widget', instanceId: 'widgetId' }).
It's not required. If this parameter is not specified, there will be generated a random id.

Create Redux store right in the extension

Note: This is not intended to replace Redux' createStore. Use this approach only when you want to inspect changes outside of Redux or when not using Redux inside your application.

Used as window.devToolsExtension(reducer, [preloadedState, config]).

See API and the example of usage.

Communicate with the extension directly

Use the following methods of window.devToolsExtension:

• open
• notifyErrors
• send
• connect
• disconnect

See a simple example of using window.devToolsExtension.connect to send changes to the extension directly without using Redux. Also, here is more complex example of using the extension for @ngrx/store.

v1.4.0

Filter what to send to the extension's monitor

Added the following parameters:

• actionsFilter (function) - function which takes action object and id number as arguments, and should return action object back. See the example bellow.
• statesFilter (function) - function which takes state object and index as arguments, and should return state object back.

Example of usage:

const actionsFilter = (action) => (
  action.type === 'FILE_DOWNLOAD_SUCCESS' && action.data ?
  { ...action, data: '<<LONG_BLOB>>' } : action
);

const store = createStore(rootReducer, window.devToolsExtension && window.devToolsExtension({
  actionsFilter,
  statesFilter: (state) => state.data ? { ...state, data: '<<LONG_BLOB>>' } : state)
}));

Also you can filter whole actions by specifying actionsBlacklist or actionsWhitelist parameter.

v1.3.1

Memory usage optimization

Now when the extension is not used (extension's windows and app's tabs are closed), it becomes inactive and not occupy any memory.

Fixes

• Fixed a memory leak due to subscribing to the background's redux store.
• Fix importing state from devpanel.
• Persist remotedev-app options.

v1.3.0

Switch monitors

Now monitors are selected directly in the monitor window, Chrome devtools panel or browser action popup. Options page becomes simple again.

Slide monitor can be included in any window by toggling the corresponding button.
Diff monitor is removed as discussed in #97.

Monitors are moved to remotedev-app, as it's just a simple web app, it's easier to add and test custom monitors. It's just one file to be changed.

Import / Export

Fixed importing from a file.
Added support for immutable structures. Example of usage with immutable-js:

const store = createStore(rootReducer, window.devToolsExtension && window.devToolsExtension({
  deserializeState: (state) => ({
    todos: {
      ...state.todos,
      todoList: Immutable.fromJS(state.todos.todoList)
    }
  })
}));

Fixes and improvements

• Fix missing messages after devtools panel is opened (#109).
• Prevent applying listener multiple times (#112).
• The code is not uglified anymore, so it's easier to deal with exceptions (#114).

v1.2.0

• Monitors are moved into remotedev-app. As it is just a web application it's easier to add and test new custom monitors.
• Added Dispatcher Monitor, so you can dispatch your app's actions from the extension monitor. Just click the 'Dispatcher` button to open it.
• Updated Redux DevTools to add support for observables (reduxjs/redux-devtools#275).

BREAKING CHANGE

No unlimited actions history limit supported anymore (#108)

v1.1.1

Fix dispatching actions from chrome devtools according to new API of remotedev-app.

v1.1.0

Now you can import/export state history from a file

Fixes:

• Fix counting for isExcess (maxAge).
• Fix breaking changes from remotedev-app.
• Fix sync options when the extension is not ready yet.
• Add the icon to the devtools panel in order to support vendor themes.
• Improved styling.

v1.0.1

• Fix the issue of inspector monitor (not supporting blacklist/whitelist) (#25)