Electron+React项目中electron-devtools-installer不生效问题求助

问题现象 #

• 基于 Electron + React 搭建新项目时，多次尝试接入 React DevTools 均未生效
• 参照 electron-devtools-installer 提供的标准接入方法配置后，启动应用打开开发者工具，控制台持续输出要求安装 React DevTools 的提示：

Download the React DevTools for a better development experience: https://reactjs.org/link/react-devtoolsYou might need to use a local HTTP server (instead of file://): https://reactjs.org/link/react-devtools-faq

• 控制台提示截图：
  

当前使用的main.js配置代码：

const { app, BrowserWindow, Notification, ipcMain } = require("electron");
const path = require("path");
const isDev = !app.isPackaged;

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

let createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    backgroundColor: "white",
    title: "TaleSmith",
    icon: path.join(__dirname, "../assets/icons/appIcon.png"),
    webPreferences: {
      nodeIntegration: false,
      worldSafeExecuteJavaScript: true,
      contextIsolation: true, // is a feature that ensures that both your preload scripts and Electron internal logical tun in separate context
      preload: path.join(__dirname, "preload.js"),
    },
  });
  win.loadFile(path.join(__dirname, "..", "src", "index.html"));
  isDev && win.webContents.openDevTools();
};

if (isDev) {
  require("electron-reload")(__dirname, {
    electron: path.join(
      __dirname,
      "..",
      "..",
      "node_modules",
      ".bin",
      "electron",
    ),
  });
}

app.whenReady().then(async () => {
  installExtension(REACT_DEVELOPER_TOOLS)
    .then((name) => console.log(`Added Extension:  ${name}`))
    .catch((err) => console.log("An error occurred: ", err));
  createWindow();
});

ipcMain.on("notify", (_, message) => {
  new Notification({
    title: "Hello World",
    body: message,
  }).show();
});

app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

app.on("activate", () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

问题原因 #

1. 扩展安装是异步操作，现有代码在调用安装方法后立刻创建窗口，窗口加载完成时扩展还未完成注入，导致DevTools检测不到。
2. Electron 14及以上版本默认禁止扩展访问file://协议加载的页面，现有配置没有开启对应权限，就算扩展安装成功也无法在当前页面生效。
3. 开发环境直接用loadFile加载本地静态文件，本身就不符合React DevTools的运行检测逻辑，容易触发提示。

修复方案 #

• 调整app.whenReady()生命周期逻辑，等待扩展安装完成后再创建窗口，同时开启扩展的本地文件访问权限：

app.whenReady().then(async () => {
  try {
    const extName = await installExtension(REACT_DEVELOPER_TOOLS, {
      loadExtensionOptions: {
        allowFileAccess: true,
      },
    });
    console.log(`Added Extension:  ${extName}`);
  } catch (err) {
    console.log("Extension install failed: ", err);
  }
  createWindow();
});

• 如果执行上述修改后控制台仍然报安装错误，是因为默认扩展拉取路径网络访问受限，不需要反复重试远程安装，直接手动下载对应版本的React DevTools扩展到本地，调用session.defaultSession.loadExtension()传入本地扩展解压路径即可。
• 开发环境建议替换loadFile逻辑，对接Vite、Webpack等构建工具启动的本地HTTP服务地址加载页面，既可以解决DevTools检测问题，也能获得更快的模块热更新体验，替换electron-reload的全量刷新逻辑。

内容的提问来源于stack exchange，提问作者Occalepsus