👿

Electronにおいて、BrowserWindowの開発者コンソールが表示されない問題

2022/05/16に公開

問題

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