Doesn't Work For React Dev Tools

[RickGove]

trafficstars

I have been able to use this to install Redux and jQuery Selector Inspector, however I can not get it to work for React DevTools following your instructions. There is no error logged and in fact the console.log stating that it has been installed runs.

My code:

import installExtension, {  REACT_DEVELOPER_TOOLS } from 'electron-devtools-installer';

app.whenReady()
  .then(() => {
  installExtension( REACT_DEVELOPER_TOOLS)
      .then((name) => console.log(`🔥🔥🔥🔥🔥 Added Extension:  ${name}`))
      .catch((err) => console.log('❌️❌️❌️❌️❌️ An error occurred: ', err));
})

[Bilb]

Same issue here. Log says the react dev tools is installed but it does not show up in the chrome dev tools.

It does work for redux dev tools though

[oleg-slapdash]

@RickGove @Bilb

I found the fix here:

   const options = {
      loadExtensionOptions: { allowFileAccess: true },
    };
    await installExtension(
      [REACT_DEVELOPER_TOOLS, APOLLO_DEVELOPER_TOOLS, REDUX_DEVTOOLS],
      options
    );

You must call it before the user loads the page. Try also refreshing with devtools on.

[loicraux]

For those still struggling with this issue, here is how I just solved it ...

Dependencies :

• [email protected]
• [email protected]

In your main process main.ts file :

const extensionOptions = {
    forceDownload: false, // not sure about this one, i've read somewhere that it could cause issues when set to true ?
    // Important setting allowFileAccess, make sure your electron version > 11.3.0 contains this PR contents : 
    // https://github.com/electron/electron/pull/25198
    loadExtensionOptions: { allowFileAccess: true }
} as const;

async function installElectronDevToolExtensions(): Promise<void> {
    if (process.env.NODE_ENV !== 'production') {
        try {
            await installExtensions([REDUX_DEVTOOLS, REACT_DEVELOPER_TOOLS], extensionOptions);
            console.info(`[INFO] Successfully added devtools extensions`);
        } catch (err) {
            console.warn('[WARN] An error occurred while trying to add devtools extensions:\n', err);
        }
    }
}

app.on('ready', async () => {
    mainWindow = new BrowserWindow({...});

    // This must be done BEFORE the page is loaded (maybe this can be moved to a sort of did-load hook ?)
    await installElectronDevToolExtensions();

    // Load page (to be adapted of course) :
    if (process.env.NODE_ENV !== 'production') {
        mainWindow.loadURL(`http://localhost:8888`);
    } else {
        mainWindow.loadURL(
            formatURL({
                protocol: 'file:',
                pathname: join(__dirname, 'index.html'),
                slashes: true
            })
        );
    }

    mainWindow.webContents.on('did-finish-load', async () => {
        mainWindow.maximize();
        mainWindow.show();
        mainWindow.focus();
    });

    // The other important bits are here, this is the ONLY thing
    // that made the react-related devtools work in my case: 
    // Waiting that the dom is ready to open the the devtools
    // (Otherwise I had to reload (CTRL+R) the page for the React-related extension to be shown in devtools.)
    if (process.env.NODE_ENV !== 'production') {
        mainWindow.webContents.once('dom-ready', () => {
            mainWindow.webContents.once('devtools-opened', () => {
                mainWindow.focus();
            });
            mainWindow.webContents.openDevTools();
        });
    }
});

Hope that helps !

[dmynarski]

@RickGove @Bilb

I found the fix here:

   const options = {
      loadExtensionOptions: { allowFileAccess: true },
    };
    await installExtension(
      [REACT_DEVELOPER_TOOLS, APOLLO_DEVELOPER_TOOLS, REDUX_DEVTOOLS],
      options
    );

You must call it before the user loads the page. Try also refreshing with devtools on.

I can confirm that adding loadExtensionOptions helps.

[Nantris]

@oleg-slapdash's fix only works in the unpackaged app, at least for us.

Our packaged app (which uses app:// protocol) cannot access React Devtools even after implementing that change. Does anyone have a fix for that?

Considering the profiler is meant to be run in a production build, that seems a significant issue.

[Kachilero]

This is still an issue with this extension and the React Dev Tools. I'm getting a bunch of errors in the console when running my app and it's unlikely to be some other code as I'm just getting this going.

This is an example of the errors that I'm currently seeing:

[42231:0818/043141.807513:ERROR:extensions_browser_client.cc(67)] Extension Error:
  OTR:     false
  Level:   2
  Source:  chrome-extension://nhcaakidjkenlfdhkfiikkmceeookkkp/build/background.js
  Message: Uncaught TypeError: chrome.tabs.query is not a function
  ID:      nhcaakidjkenlfdhkfiikkmceeookkkp
  Type:    RuntimeError
  Context: chrome-extension://nhcaakidjkenlfdhkfiikkmceeookkkp/build/background.js
  Stack Trace: 
    {
      Line:     208
      Column:   1
      URL:      chrome-extension://nhcaakidjkenlfdhkfiikkmceeookkkp/build/background.js
      Function: (anonymous function)
    }

[Stanzilla]

Yeah this is still broken

[Nantris]

Works fine for me in dev. Useless in production.

[danikaze]

2024 and doesn't appear for me either... even with allowFileAccess: true I also can see in the console the following:

Download the React DevTools for a better development experience: https://reactjs.org/link/react-devtools

• react: 18.3.1
• electron: 31.0.2

(installed from @quick-start/electron)

[Stanzilla]

@erickzhao @MarshallOfSound @codebytere is there any hope for this? Since it is included in the official docs it should really be fixed.