电子开发工具安装程序不工作反应

Question

我目前正在使用电子和反应开始一个新项目，但我不明白，但我正在尝试使用 React devTools，我尝试了一些方法，但都没有奏效。

例如，我在这里遵循了 electron-devtools-installer 的方法，可以在这里找到： https ://github.com/MarshallOfSound/electron-devtools-installer 当我启动应用程序时，检查员仍然告诉我

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();
  }
});

非常感谢你的帮助 ！

Answer 1

利用“dom-ready”事件来启动开发工具，而不是在应用程序准备好时。 试试这个

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"));

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

        // Errors are thrown if the dev tools are opened
        // before the DOM is ready
        win.webContents.once("dom-ready", async () => {
            await installExtension([REACT_DEVELOPER_TOOLS])
                .then((name) => console.log(`Added Extension: ${name}`))
                .catch((err) => console.log("An error occurred: ", err))
                .finally(() => {
                    win.webContents.openDevTools();
                });
        });
    }
};

app.on("ready", 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();
    }
});