electron-devtools-安装程序无法正常工作

9wbgstp7 于 2022-12-08 发布在 Electron

关注(0)|答案(1)|浏览(342)

我目前正在开始一个新的项目与电子和React，我不明白，但我试图使用ReactdevTools，我已经尝试了一些方法，他们都没有工作。
例如，我在这里遵循了electron-devtools-installer的方法，可以在这里找到：https://github.com/MarshallOfSound/electron-devtools-installer，当我启动应用程序时，检查器仍然告诉我that

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

非常感谢您的帮助！

electron

来源：https://stackoverflow.com/questions/72964131/electron-devtools-installer-not-working-react

1条答案

按热度按时间

41zrol4v1#

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

赞(0）回复(0）举报 2022-12-08

我来回答

electron-devtools-安装程序无法正常工作

1条答案

相关问题

热门标签

最新问答