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