Loading React & Redux dev tools in Cypress

Install webpack plugin: npm install --save-dev react-dev-tools-iframe-webpack-plugin

Update webpack config to enable the react dev tools iframe:

const ReactDevToolsIFramePlugin = require('react-dev-tools-iframe-webpack-plugin');

plugins: [
  // other plugins,
  new ReactDevToolsIFramePlugin(),
],

Update cypress plugins to load React & Redux dev tools for chrome. Add the paths to these extensions in a comma-separated string:

module.exports = (on, config) => {
  on('before:browser:launch', (browser = {}, args) => {
    if (browser.name === 'chrome') {
      args.push('--load-extension=/home/work/.config/google-chrome/Default/Extensions/lmhkpmbekcpmknklioeibfkpmmfibljd/2.17.0_0,/home/work/.config/google-chrome/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi/4.2.1_0');
      return args;
    }
    return null;
  });
};

Here’s a post where you can find out where the extensions are.

Tweet