みかづきブログ・カスタム

基本的にはちょちょいのほいです。

トップ > Electron > Electronでディベロッパーツールの起動を禁止する 🚫

Electronでディベロッパーツールの起動を禁止する 🚫

Electron


結論

const { app } = require('electron');

const window = new BrowserWindow({
  width: 375,
  height: 812,
  webPreferences: {
    devTools: false
  }
});

と、BrowserWindowのインスタンスを作成する際に渡すオプションでディベロッパーツールを無効化できる。
webPreferences.devToolsの値にfalseを渡せばOK。

ことの発端

アプリ版のSlackがElectron製ということは割と有名な話です。

なので、アプリ版のSlackでも昔は、ウェブ版と同様に「option」+「command」+「i」でChromiumディベロッパーツールを開くことができたのですが、先日試したところ、いつの間にか開けなくなっていることに気づきました。
ということは、Electron製のアプリでディベロッパーツールを禁止することができるということなので、調査した次第です。


ドキュメントの確認

早速、ドキュメントを確認してみました。

www.electronjs.org

すると、BrowserWindowのnew BrowserWindow([options])のwebPreferencesのところに、

devTools boolean (optional) - Whether to enable DevTools. If it is set to false, can not use BrowserWindow.webContents.openDevTools() to open DevTools. Default is true.

という記述を発見。

www.electronjs.org

この指示通りに従ってみたのが、結論に書いたコードです。
無事にディベロッパーツールの起動を禁止できたことを確認しました。（Electron 17.1.2で確認）


余談

ドキュメントを隅々まで読めば簡単に解決できた話だったのですが、
ドキュメントを読む前にVSCodeの補完で、

app.disableDevTools;

たるものを発見し、

const { app, BrowserWindow } = require('electron');

app.disableDevTools();

app.on('ready', () => {
  const window = new BrowserWindow({
    width: 375,
    height: 812,
    webPreferences: {
      nodeIntegration: true
    }
  });

  window.loadURL('https://kimizuka.fm');
});

というコードを書き、実行してみてました。

結果、

TypeError: app.disableDevTools is not a function

と、普通にエラーが吐かれて落ちました。

app.disableDevToolsなんてドキュメントに記載されてないですからね。
やっぱりドキュメントに目を通すことが一番大事だということを再認したできごとでした。