v2.7.0

Pausing and locking features

Read the post for details about why and how to use them.

Deprecating the extension's enhancer

As described in the post, instead of window.devToolsExtension (which was planned to be deprecated in favour of window.__REDUX_DEVTOOLS_EXTENSION__), now we’ll be using window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ as following:

import { createStore, applyMiddleware, compose } from 'redux';
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const enhancer = composeEnhancers(
  applyMiddleware(...middleware),
  // other store enhancers if any
);
const store = createStore(reducer, enhancer);

Also there's redux-devtools-extension npm package you can install and use as following:

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
const store = createStore(reducer, composeWithDevTools(
  applyMiddleware(...middleware),
  // other store enhancers if any
);

When applying extension's options:

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
const composeEnhancers = composeWithDevTools({
  name: 'MyApp', actionsBlacklist: ['REDUX_STORAGE_SAVE']
});
const store = createStore(reducer, composeEnhancers(
  applyMiddleware(...middleware),
  // other store enhancers if any
);

There’re just few lines of code. If you don’t want to allow the extension in production, just use redux-devtools-extension/developmentOnly instead of redux-devtools-extension.

New options

• maxAge (number) - maximum allowed actions to be stored on the history tree, the oldest actions are removed once maxAge is reached. Default is 50.
• shouldCatchErrors (boolean) - if specified as true, whenever there's an exception in reducers, the monitors will show the error message, and next actions will not be dispatched.
• shouldRecordChanges (boolean) - if specified as false, it will not record the changes till clicking on Start recording button. Default is true.
• pauseActionType (string) - if specified, whenever clicking on Pause recording button and there are actions in the history log, will add this action type. If not specified, will commit when paused. Default is @@PAUSED.
• shouldStartLocked (boolean) - if specified as true, it will not allow any non-monitor actions to be dispatched till clicking on Unlock changes button. Default is false.
• shouldHotReload boolean - if set to false, will not recompute the states on hot reloading (or on replacing the reducers). Default to true.

No error notifications by default

Even it's one of the basic features of the extension to catch errors (especially in reducers) and show which action caused that, it seems to cause bad UX for some use cases, especially for sites using the extension in production. You can enable them in the settings.

v2.6.1

Fixes

• Added support for monitoring iframes from devpanel (#209).
• Fix passing name parameter (#212).
• Fix monitoring from devpanel after the tab is reloaded (#212).
• Fix removing the instance from devpanel.

v2.6.0

Refactored the whole functionality (#211)

Now the extension's functionality is handled by reducers and middlewares, which makes it more reliable and easer to debug. It's even possible to debug Redux DevTools Extension with Redux DevTools Extension:

It's necessary to blacklist devTools/UPDATE_STATE to avoid the infinite loop, and to require src/browser/extension/inject. However, most of the functionality was split into remotedev-app, which can be debugged as a simple web application.

Fixes and improvements

• All the features from the extension window are now available from Chrome DevTools Panel as well (#201)
• Removed batching actions, which wasn't effective enough (#208)

v2.5.1

Receive logs / reports from users and get them replicated right in the extension

See zalmoxisus/remotedev-server#20 for usage details.

v2.5.0

Autogenerate "real" tests

As announced at React Europe, the extension can generate tests for the inspected actions.

Thanks to Redux principles, it's a rather simple task:

expect(reducer(pervousState, action), currentState);

However, such tests are difficult to maintain and they aren't human-readable. Hacking a lot these days, we can now check only what was changed.

So, instead of

expect(
  reducers(
    {counter:0},
    {type:'INCREMENT_COUNTER'}
  )
).toEqual(
  {counter:1}
);

the extension generates tests like so

state = reducers(
  {counter:0},
  {type:'INCREMENT_COUNTER'}
);
expect(state.counter).toEqual(1);

Or for arrays, instead of

expect(
  reducers(
    {todos:[{text:'Use Redux',completed:false,id:0}]},
    {type:'ADD_TODO',text:'Generate tests'})
  )
).toEqual(
  {todos:[{id:1,completed:false,text:'Generate tests'},{text:'Use Redux',completed:false,id:0}]}
);

it will check only the length and new elements:

state = reducers(
  {todos:[{text:'Use Redux',completed:false,id:0}]},
  {type:'ADD_TODO',text:'Generate tests'})
);
expect(state.todos.length).toEqual(2);
expect(state.todos[0]).toEqual({id:1,completed:false,text:'Generate tests'});

Here's the full autogenerated test with also changing and removing an item:

There are default templates for Mocha, Tape and Ava, you can select and edit. You can also add you specific templates there.

Correlate time travelling to state and actions

In log monitor you can now identify actions from "the future":

Import actions saved from production

The extension can import now not only full lifted state from a file, but also just an array of actions which you could save from a redux middleware and send to a monitoring service. An example of such implementation is redux-trackjs-logger.

v2.4.0

1. Use action creators for Dispatcher (see examples):

2. New design for Options page (thanks to @iamakulov):

3. Optimized devtools panel [#170].

4. Better support for non-redux apps (see mobx-remotedev).

v2.3.1

Firefox support 🎉

We're supporting firefox with all the features except running from Firefox DevTools panel (which will come as soon as it will be implemented). Minimal required version is Firefox 48, which should be released soon. For now use Firefox Nightly or Developer Edition.

To build the extension run npm i && npm run build:firefox and load the extension's folder ./build/firefox. It will also should be available on AMO soon.

v2.3.0

Exposed the monitors API

Specify getMonitor function as a parameter to get monitor object with the following methods:

• start (function) - starts monitoring (relaying logs to the monitor).
• stop (function) - stop monitoring (the monitor will not get new changes till you start it again with the function above).
• update (function) - update state history. Usually you want to use it when stopped monitoring (with the function above) and want to update the logs explicitly (useful for apps which dispatch actions too frequently).
• isHotReloaded (function) - return true if reducers just got hot reloaded (useful for dealing with side effects, which didn't get hot-reloaded).
• isMonitorAction (function) - return true if the last action was dispatched by the monitor (was: 'TOGGLE_ACTION', 'SWEEP', 'SET_ACTIONS_ACTIVE', 'IMPORT_STATE').
• isTimeTraveling (function) - return true if the state was set by moving back and forth (the last action was dispatched by the monitor was 'JUMP_TO_STATE'). Usually you want to use it to skip side effects.

Example of usage:

export let isMonitorAction;
export default function configureStore(initialState) {
  return createStore(reducer, initialState, 
    window.devToolsExtension && window.devToolsExtension({
      getMonitor: (monitor) => { isMonitorAction = monitor.isMonitorAction; }
    })
  );
}  

Optimizations

Now we prevent flooding. In case your app dispatch more than 5 actions in a second, they will be collected and sent all at once.

Better Electron support (#158)

v2.2.1

Internal fixes

• Better approach for Electron DevTools extension (#152)
• Fix context menu listener when event page becomes inactive (#154)
• Added tests for enhancer, monitoring, React component (monitor), Chrome and Electron extension.

v2.2.0

Generate tests with your templates as presenting at React Europe.

Also you can use it as stand alone component for Redux DevTools: https://github.com/zalmoxisus/redux-devtools-test-generator