How to add react dev tools?

[ZionLG]

I've having issues with integrating react dev tools.
I tried following electrons guide but it didnt load it.

const reactDevToolsPath = join(
  homedir(),
  '/Library/Application Support/Google/Chrome/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi/7.0.1_0'
)
app.whenReady().then(async () => {
...
  await session.defaultSession.extensions.loadExtension(reactDevToolsPath)
...
})

any existing examples?

[ismaildasci]

the issue is usually the path format or that the extension needs to be loaded after the window is created.

try this approach:

import { app, session } from "electron";
import path from "path";
import os from "os";

const isDev = !app.isPackaged;

async function loadDevTools() {
  if (!isDev) return;

  const reactDevToolsPath = path.join(
    os.homedir(),
    "Library/Application Support/Google/Chrome/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi"
  );

  // get the latest version
  const { readdirSync } = await import("fs");
  const versions = readdirSync(reactDevToolsPath);
  const latestVersion = versions.sort().pop();
  
  if (latestVersion) {
    const extensionPath = path.join(reactDevToolsPath, latestVersion);
    await session.defaultSession.loadExtension(extensionPath);
    console.log("React DevTools loaded from:", extensionPath);
  }
}

app.whenReady().then(async () => {
  await loadDevTools();
  // then create your windows
});

alternatively use electron-devtools-installer which handles this automatically:

npm install electron-devtools-installer -D

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

app.whenReady().then(async () => {
  if (isDev) {
    await installExtension(REACT_DEVELOPER_TOOLS);
  }
});

make sure:

1. path has no typos
2. extension is enabled in chrome
3. you restart electron after changes
4. devtools window is open (f12) to see the react tab