Better data flow

• Improve the data sending process.
• Autoselect the instance for the current window now when opening devpanel.
• Show all slider buttons when time travelling, but disabled when not available.
• Display errors from the client side during importing.

Better export

Now, instead of exporting all the states, only the list of actions and the preloaded state is exported. The resulted file is smaller and readable. Also the serialized options are applied (#255), so unserializable types (like dates, regexes, undefined, error objects, and functions) can be exported as well.

v2.10.0

Get remote reports right in the extension and import them right into your app

Use redux-remotedev with remotedev-server to save reports. To enable it, just click Remote DevTools button and add your host and port to the settings.

Support monitor reducers

Now Redux Devtools monitors are compatible with the extension as their reducers are not ignored as before. The difference, however, is that the reducers are called not for every action, but only when a monitor action is dispatched.

v2.9.0

Now Redux DevTools Extension is way more performant out of the box. Before highly updated apps would flood the extension causing it to take all the CPU.

Here's an autotodo example with lots of data and even containing circular references in the state. As you notice 100% of CPU is taken for rerendering React components while the extension takes only about 20%:

Also you can check autoincremening example for a lighter demo.

While the extension is running in a separate process, 20% for a highly updated app shouldn't be a problem. If you want it to have no impact at all, set the latency parameter to 1000 ms or more, as you usually don't get to investigate more than one action per second. If the state is huge, you can either set maxAge parameter to 30 or less or strip that payload by using actionSanitizer / stateSanitizer parameters.

Example of usage:

const store = createStore(rootReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__({
  latency: 1000,
  maxAge: 30,
  stateSanitizer: (state) => state.data ? { ...state, data: '<<LONG_BLOB>>' } : state
}));

If you still want all the changes to be available immediately, set latency parameter to 0. Also the extension strips circular reference to gain the performance. If you want them to be serialized, set serializeAction / serializeState to false. If you want it in the fast mode keep them as undefined (which is by default).

v2.8.5

New script to include in other extensions

In case you're using Redux Extension inside other Chrome extensions, you should include chrome-extension://lmhkpmbekcpmknklioeibfkpmmfibljd/js/redux-devtools-extension.js script. Using of the old inject.bundle.js is deprecated. See FAQ for more details. Big thanks to @jhen0409 for working on this!

Support for ES6 SYMBOL in states or actions

In v2.8.4 we introduced new serializeState and serializeAction parameters. Now if you set them to true, the extension will serialize the symbols value: { type: Symbol.for('DO_SOMETHING_ACTION') } will become { type: "Symbol(DO_SOMETHING_ACTION)" }.
See the release notes for an example of usage and details.

Log monitor's root objects are expanded now

Recently we collapsed action and state objects, however it's reverted now (#236).

v2.8.4

New serializeState and serializeAction parameters

• serializeState (boolean or function or object) - specify how and what should be handled during serialization (useful if state is not plain object). Could be:

  • false - handle only circular references.

  • true - handle also dates, regexes, undefined, error objects, and functions.

  • function(key, value) - JSON replacer. Example of usage with mori data structures:

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

  • object ({ replacer: function, options: object }) - in addition to the replacer function, specify an options object, which contains date, regexe, undefined, error, and function keys. Fo each of them you can indicate whether to include (if set as true). For function key you can also specify a custom function which handles serialization. See jsan for more details. Example:

    const store = Redux.createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__({
      serializeState: { 
        options: {
         undefined: true,
         function: function(fn) { return fn.toString() }
        }
      }
    }));

• serializeAction (boolean or function or object) - same as serializeState but used for actions payloads.

Misc

• Removed support for serialize option. Data is always stringified now as the benchmark showd there's no performance gain without serialization.
• Deprecated devToolsExtension.updateStore. Remove it and just use __REDUX_DEVTOOLS_EXTENSION_COMPOSE__ instead of the extension's store enhancer.
• Fix regression issue from v2.8.2 (#208).

v2.8.3

New predicate parameter (#232)

• predicate (function) - called for every action before sending, takes state and action object, and returns true in case it allows sending the current data to the monitor. Use it as a more advanced version of actionsBlacklist/actionsWhitelist parameters.
  Example of usage:

    const store = createStore(rootReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__({
      predicate: (state, action) => state.dev.logLevel === VERBOSE && !action.forwarded
    }));

Updated monitors

• States and actions objects are collapsed from now:
  
• Diff in the Inspector monitor show a preview before expanding it:
  

Deprecations

• Renamed statesFilter and actionsFilter to stateSanitizer and actionSanitizer.

v2.8.2

Keyboard shortcuts

• Added a new keyboard shortcut, Cmd (Ctrl) + Shift + E, which opens the extension's dialog (only when the Redux store is available in the current page).
• All other shortcuts used before (for opening windows and for Romote DevTools) are disabled by default. To set/change the keyboard shortcuts, click "Keyboard shortcuts" button on the bottom of the extensions page (chrome://extensions/).

Iframes support

If the app is interacting with the extension from iframes, there will be 3 seconds delay for initialization, in order to avoid performance issues reported in #207 (comment).

v2.8.1

Print the graph view of the app state or the changes log

See zalmoxisus/remotedev-app#22 for details.

Fixes

• Better handling of circular references.
• Support actions with undefined states (reduxjs/redux-devtools#320).

v2.8.0

Better time travelling with changes right in the Graph Monitor

Now Graph Monitor:

• shows the current state when time travelling (#224)
• flashes the updated nodes to see which of them was changed (#180).

Slider Monitor is now:

• accessible: control with the keyboard.
• optimized: it's not rerendering, unless you're time travelling or selected Chart Monitor.
• informative: when Chart Monitor is selected, it will show the current action type there in addition to the state in the graph.

Test generation

• Simplified tests generating. Mostly reverted what v2.5.0 was introducing, so it's more stable now and templates are simpler.
• Added Jest template.

Other improvements

• Circular references inside states and action's payloads are stripped now, in order to make monitoring faster and stable.
• Warn about not allowing access to file URLs (#219).
• Don't update the store when the page is blacklisted in settings.