Electron 开发工具不显示

Question

Whenever I start my Electron app & tell it to open the dev tools, nothing happens. Manual selection from the menu doesn't do anything, nor does [Ctrl] + [Shift] + I. All the other posts I've seen say to call openDevTools() or use the keyboard shortcut - both of which I'm doing to no avail.

Here is my window initialization code:

const Window = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
        preload: path.join(__dirname, "..", "preload.js"),
    },
});
Window.webContents.openDevTools();
Window.loadFile(path.join(__dirname, "../..", "index.html"));

I'm using Electron 20.01 on Windows 10.

Edit Further up in my file I'm connecting to an sqlite3 database using Sequelize. It would appear that that code is somehow preventing the dev tools from opening.

This code:

const sequelize = new Sequelize({
    dialect: "sqlite",
    storage: path.join(__dirname, "..", "..", "db.db"),
});

Is the culprit. Commenting it out results in the dev tools showing.

Answer 1

I believe the webContents of the window is only initialized once you navigate the window to a page, so you should open the devtools only after you've done that, preferably after awaiting the load.

await Window.loadFile(path.join(__dirname, "../..", "index.html"));
Window.webContents.openDevTools();