Devtools don't show on OSX

[mboutin-qohash]

Hi! I'm working on an Electron app and I'm testing it on OSX and Windows.

Everything is fine on Windows but my 2 extensions doesn't show at all on OSX.

This is what I use:

const { default: installExtension, REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS } = require('electron-devtools-installer')

  installExtension(REACT_DEVELOPER_TOOLS)
    .then((name) => {
      log.debug(`Added Extension: ${name}`)
    })
    .catch((err) => {
      log.error('An error occurred: ', err)
    })

  installExtension(REDUX_DEVTOOLS)
    .then((name) => {
      log.debug(`Added Extension: ${name}`)
    })
    .catch((err) => {
      log.error('An error occurred: ', err)
    })

What can I check or change to have them on OSX?

[RoderickJDunn]

I had the same issue. I had to do 3 things to get both extensions to show up in devtools.

1. Upgrade Electron - I was on 11.1 but had to upgrade to 11.3
2. Install this package from github instead of npm. Run the command yarn add git+https://github.com/MarshallOfSound/electron-devtools-installer.git to install the latest on master.
3. Use the new option "loadExtensionOptions" and include "allowFileAccess: true" to the options passed into "installExtension", as follows:

   import installExtension, { REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS } from 'electron-devtools-installer';
   ...
   const forceDownload = !!process.env.UPGRADE_EXTENSIONS;
   const extensions = [REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS];
   installExtension(
     extensions,
     {loadExtensionOptions: {allowFileAccess: true}, forceDownload: forceDownload}
   )
   .catch(console.log);

[RobinClowers]

I was able to get this working with electron-devtools-installer 3.2.0 and electron 11.4.7. It did not work with an earlier electron 11 release, FYI.

[schontz]

Even after cleaning up all the warnings and using @RoderickJDunn's suggestion, no dev tool extensions show up.

Electron v12.0.8 Node v14.15.4 Mac v10.15.17

[neilning-xc]

I had the same issue. I had to do 3 things to get both extensions to show up in devtools.

1. Upgrade Electron - I was on 11.1 but had to upgrade to 11.3
2. Install this package from github instead of npm. Run the command yarn add git+https://github.com/MarshallOfSound/electron-devtools-installer.git to install the latest on master.
3. Use the new option "loadExtensionOptions" and include "allowFileAccess: true" to the options passed into "installExtension", as follows:

import installExtension, { REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS } from 'electron-devtools-installer';
...
const forceDownload = !!process.env.UPGRADE_EXTENSIONS;
const extensions = [REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS];
installExtension(
      extensions,
      {loadExtensionOptions: {allowFileAccess: true}, forceDownload: forceDownload}
    )
    .catch(console.log);

Thanks, it fixes the issue

[timothymalcham]

Following @RoderickJDunn's instructions allowed the redux dev tools to show up, but not the react dev tools. Has anybody else found a solution to this?

[f-o-w-l]

Redux has always shown up for me, but never React Dev Tools, though they're being installed the same way.

Running Manjaro Linux and electron 11.4.12 with node 12.18.3 runtime

Someone let me know if I should make another issue, not going to for now.

[ganeshrvel]

If anyone else is facing the same issue and is unable to get the package working on a mac Intel silicone then you may use this:

yarn add  -D git+https://github.com/ganeshrvel/electron-devtools-installer.git#fix/electron-18

const { app } = require('electron');

export async function installExtensions() {
  const {
    default: installExtension,
    REDUX_DEVTOOLS,
    REACT_DEVELOPER_TOOLS,
  } = await import('electron-devtools-installer');

  return app.whenReady().then(async () => {
    const forceDownload = !!process.env.UPGRADE_EXTENSIONS;
    const extensions = [REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS];
    installExtension(extensions, {
      // loadExtensionOptions: { allowFileAccess: true },
      forceDownload,
    })
      .catch((err) => console.error('An extension error occurred: ', err));
  });
}

• Force download extensions into your local machine

  # this is one time only thing to force download extensions into your local machine
  UPGRADE_EXTENSIONS=1 yarn dev // or UPGRADE_EXTENSIONS=1 yarn dev or whatever you use

• Stop the app

• Start the app normally

  yarn dev // or yarn start or whatever you use

WARNING

---

Always check the git commit history before adding any arbitrary packages. Commit history - https://github.com/ganeshrvel/electron-devtools-installer/commits/fix/electron-18

[aluminum1]

React Dev Tools doesn't work for me. None of the above fixes work. Electron v31.