Electronのデバッグ時にDebugとReleseに分ける（Visual Studio Code）

概要

Visual Studio Codeを使ってElectronをデバッグをするときに、「Debug」の時はDevToolsを表示、「Release」の時はDevToolsを非表示のように構成で処理を分ける方法

launch.jsonを修正

（launch.jsonについては「Electronの環境構築とVisual Studio Codeでデバッグする方法」を参照）

「Debug」と「Release」用に構成を2つ作る

launch.json

"configurations": [
        {
            "name": "Debug",
            "type": "node",
            "request": "launch",
            "cwd": "${workspaceRoot}",
            "program": "${workspaceRoot}/src/main.js",
            "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
            "runtimeArgs": [
                "--enable-logging"
            ],
            "args": [
                "."
            ],
            "windows": {
                "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
            },
            "console":"integratedTerminal",
            "env": {
                "NODE_ENV": "debug",
            }
        },
        {
            "name": "Release",
            "type": "node",
            "request": "launch",
            "cwd": "${workspaceRoot}",
            "program": "${workspaceRoot}/src/main.js",
            "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
            "runtimeArgs": [
                "--enable-logging"
            ],
            "args": [
                "."
            ],
            "windows": {
                "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
            },
            "console":"integratedTerminal",
            "env": {
                "NODE_ENV": "release",
            }
        }
    ]

「Electronの環境構築とVisual Studio Codeでデバッグする方法」で書いた設定と変わっているところは以下

// Debugの方
・・・
          "env": {                 // ← 追加
         　　"NODE_ENV": "debug",  // ← 追加
          }                        // ← 追加
      },
・・・

// Relaseの方
・・・
          "env": {                 // ← 追加
             "NODE_ENV": "release",// ← 追加
          }                        // ← 追加
      }
・・・

（例）「Debug」の時はDevToolsを表示

main.js

・・・
  if (process.env.NODE_ENV === "debug") {  // ←追記
    mainWindow.openDevTools();
  }                                        // ←追記
・・・

こうすることで、「Debug」のときはDevToolsが表示され、「Release」の時はDevToolsは表示されなくなる。