Edited at

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は表示されなくなる。