👿
Electronにおいて、BrowserWindowの開発者コンソールが表示されない問題
問題
Electronでは、レンダラプロセス上の表示を調整したり、JavaScriptの処理をデバッグするときなどに、Chromeの開発者コンソールを使うと便利です。
main.js
// ...
let win = new BrowserWindow({
webPreferences: {
nodeIntegration: false,
contextIsolation: true,
}
});
win.setMenuBarVisibility(false);
win.loadFile(path.join(__dirname, "./src/index.html"));
if(!app.isPackaged){
win.webContents.openDevTools(); // 開発者コンソールの表示
}
// ...
しかしながら上記のやり方だと、BrowserWindowの初期化処理が長くなったときなど、Windowの表示準備が終わってない段階でwin.webContents.openDevTools();が呼び出されてしまうことがあり、そのときに開発者コンソールが表示されない という問題があります。
解決策
ウィンドウの表示準備が整ってから、開発者コンソールを表示するようにコードを変更します。
main.js
// ...
let win = new BrowserWindow({
show: false,
webPreferences: {
nodeIntegration: false,
contextIsolation: true,
}
});
win.setMenuBarVisibility(false);
win.loadFile(path.join(__dirname, "./src/index.html"));
win.once("ready-to-show", () => {
win.show()
if(!app.isPackaged){
win.webContents.openDevTools();
}
});
// ...
BrowserWindowのready-to-showイベントが発生したときに開発者コンソールを表示するようにします。
このようにすると、開発者コンソールが確実に表示されるようになります。
Discussion