さかなソフトブログ

プログラミングやソフトウェア開発に関する情報

Electron

ElectronのデバッグはVSCodeがやりやすい

更新日:

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'
        )
  })
}

参考リンク

正方形336

正方形336

-Electron
-

Copyright© さかなソフトブログ , 2019 All Rights Reserved.