ElectronのメインプロセスのデバッグはVS Codeがとても便利なのでIDEとして愛用しています。VS CodeであればGUIよりnode.jsをデバッグ有効の状態でアプリケーションを起動出来ます。
VS Codeで起動設定を定義してデバッグする
Electronプロジェクトフォルダより.vscode/launch.json以下の様に設定します：
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug Main Process",
"type": "node",
"request": "launch",
"env": {"NODE_ENV": "development"},
"cwd": "${workspaceRoot}",
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
"windows": {
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
},
"protocol": "inspector",
"args" : ["src"]
}
]
}上記は環境変数NODE_ENVに"development"、コマンド引数に"src"、つまりsrcフォルダのpackage.jsonで起動するように指定しています。
protocolはnode.jsのデバッグプロトコルでデフォルトだと"auto"になっており、対応している新しいプロトコルを利用します。node v6.3、Electronではv1.7.2からV8 Inspector Protocolが有効になります。しかしながらv1.7.2付近ではVSCode+Electronで利用するとクラッシュする不具合があり、Electron v1.7.5辺りから安定して利用することが出来ます。
古いElectronバージョンでinspectorが対応していないor不安定な場合は手動でV8 DebuggerにProtocol、"protocol": "legacy"と設定する必要があります。
おまけ： レンダープロセスのデバッグ
Chromeとほぼ同じDOMインスペクタが使えます。但し、ソース非公開プロダクトの場合は公開アプリでショートカットが利用出来ると困るので、NODE_ENV環境変数にてdevelopment環境を定義出来るようにしてます。
ウィンドウにフォーカスを当てた際のアクティブウィンドウに対してDOMインスペクタがChromeと同じショートカットを次のように登録します：
if (process.env.NODE_ENV==='development') {
app.on('browser-window-focus', (event, focusedWindow) => {
globalShortcut.register(
process.platform === 'darwin' ? 'Alt+Command+I' : 'Ctrl+Shift+I',
() => focusedWindow.webContents.toggleDevTools()
)
})
app.on('browser-window-blur', (event, focusedWindow) => {
globalShortcut.unregister(
process.platform === 'darwin' ? 'Alt+Command+I' : 'Ctrl+Shift+I'
)
})
}