Electronでパッケージングしたアプリでdevtoolsを開かせない方法

Question

Electronでパッケージングしたアプリでdevtoolsを開きたくありません

公式ドキュメントのクイックスタートを参考に、アプリ作成からパッケージングまでを行いました。

npx @electron-forge/cli import
npm run make

そして配布用のアプリのメニューに、「View」の「toggle developer tools」が出ていて、開くとソースが確認できてしまいます。
またキーボードショートカットでもdevtoolsが開けてしまいます。

公開用アプリでdevtoolsを開かせない方法はないでしょうか？
出来れば開発時はdevtoolsを使える状態にしておきたいです。
知っている方いましたら、ご教授いただけますと幸いです。

試したこと

BrowserWindowのオプションに下記を追加しました。

webPreferences: {
 devTools: false
}

正直これでも目的は達成できているのですが、これだとサブウィンドウなど全てにこのオプションが必要になります。
パッケージングのときに全て直すのは大変ですし、メニューの「toggle developer tools」は残ったままでした。

●追記
次のメニューを上書きし「toggle developer tools」をなくしました。
するとショートカットも消えるとのでdevtoolが開けなくなりました。
これでも問題ないので自己解決にしようと思ったのですが、これだと開発環境でもdevtoolが開けず不便でした。

補足情報（FW/ツールのバージョンなど）

OS: Mac osx var.10.15.7
Electron: 10.1.5

Answer 1

electronで、開発時とリリース後を分けるときにはapp.isPackagedを使うとよいです。

app.isPackaged

アプリがパッケージされている場合はtrue、それ以外は false を返す Boolean プロパティ。 多くのアプリケーションでは、このプロパティを用いて開発版の環境と製品版の環境を区別できます。(Electron APIより引用)

例えば、

if (!app.isPackaged) {
    win.webContents.openDevTools();
}

のようにすると、開発時にしか開かれません。
つまり、追記に書かれている上書き処理をif (app.isPackaged){}で囲むと、

• パッケージされているとき ・・・ その上書き処理が実行される。
• 開発時 ・・・ 上書き処理は実行されなくてdevtoolを開くことできる。

という風になります。

---

また、環境変数のNODE_ENVを使う方法もあります。
現在の実行モードを確かめるには、process.env.NODE_ENVを使います(Electronの機能ではなく、Node.jsの機能です)。
ただし、実行するときには、環境変数を設定しないといけません。
コマンドプロンプトで、以下のように実行すると、環境変数が設定されます。

どんなとき	MacOS、Linuxの場合	Windowsの場合
開発時	NODE_ENV=development	set NODE_ENV=development
テスト時	NODE_ENV=test	set NODE_ENV=test
リリース後	NODE_ENV=production	set NODE_ENV=production

if (process.env.NODE_ENV == "development"){
    win.webContents.openDevTools();
}

このようにすると、NODE_ENVがdevelopmentの時にだけdevtoolが開かれます。
つまり、追記に書かれている上書き処理をif (process.env.NODE_ENV == "production" || process.env.NODE_ENV == "test"){}で囲むと、

• リリース後 ・・・ その上書き処理が実行される。
• テスト時 ・・・ その上書き処理が実行される。
• 開発時 ・・・ 上書き処理は実行されなくてdevtoolを開くことできる。

という風になります。
ここやここなどを参考にしてみてください。

---

長文で分かりにくいかもしれません。
ちなみに、自分は今回の場合、app.isPackagedをおすすめします。

Comments

[nand]

とてもご丁寧にありがとうございます！この方法で解決しました。
electronは英語で検索かけても情報が少なく、開発に慣れていない自分のような初心者には答えが出せなかったのでとても助かりました！