[翻訳] VSCodeでElectronのメインプロセスとレンダラープロセスの両方を同時にデバッグする方法

これはElectron debugging (main and renderer process)の翻訳です。ElectronにはNodeJS内で実行されるメインプロセス(Main process)とChromium内で実行されるレンダラープロセス(Renderer process)という2種類のプロセスがあり、それぞれに異なるデバッガーを利用する必要があります。この記事ではVSCodeを使ってこの2つのプロセスを同時にデバッグする方法を紹介しています。

Note: デバッガーはInspectorプロトコルに依存しているためElectron 1.7.4以降を使うようにしてください。

最初に

1. 最新のVSCodeがインストールされていることを確認してください
2. VSCodeに最新のDebugger for Chromeがインストールされていることを確認してください
3. このガイドはelectron-Quick-start projectの利用を想定してします。最初にリポジトリをcloneしてください

git clone https://github.com/electron/electron-quick-start.git
cd electron-quick-start
npm install
code .

launch.jsonファイルを設定する

• アクティビティーバーのデバッグアイコンをクリックしてデバッグビューを表示してください。次にlaunch.jsonファイルを設定するために歯車アイコンをクリックしChromeを環境として選択してください
• 生成されたlaunch.jsonファイルの内容を次の2つの設定で置き換えてください

  {
      "version": "0.2.0",
      "configurations": [
          {
              "type": "node",
              "request": "launch",
              "name": "Electron: Main",
              "protocol": "inspector",
              "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
              "runtimeArgs": [
                  "--remote-debugging-port=9223",
                  "."
              ],
              "windows": {
                  "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
              }
          },
          {
              "name": "Electron: Renderer",
              "type": "chrome",
              "request": "attach",
              "port": 9223,
              "webRoot": "${workspaceRoot}",
              "timeout": 30000
          }
      ],
      "compounds": [
          {
              "name": "Electron: All",
              "configurations": [
                  "Electron: Main",
                  "Electron: Renderer"
              ]
          }
      ]
  }

メインプロセスをデバッグする

1. main.jsの16行目、createWindow関数内にブレークポイントをセットしてください
2. デバッグビューを開き、'Electron: Main'コンフィグレーションを選択してF5キーを押すか緑の再生ボタンをクリックしてください
3. VSCodeがあなたのElectronアプリケーションを開始し、main.jsの16行目でブレークポイントがヒットするはずです

レンダラープロセスをデバッグする

1. renderer.jsを以下の内容に更新してください

      // This file is required by the index.html file and will
      // be executed in the renderer process for that window.
      // All of the Node.js APIs are available in this process.
   
      function test() {
          console.log('test')
      }
   
      test()
   

2. デバッグセッションが実行中の間、デバッグビューを開いて、'Electron: Renderer'コンフィグレーションを選択できます。これはVSCodeをElectronレンダラープロセスに接続します。

3. 接続されたらrenderer.jsを開きブレークポイントを6行目にセットしてください

4. あなたのElectronアプリケーションのウインドウを開き、ブレークポイントがセットされることを確実にするためにページをリロード(View -> reload または CMD+R)してください

5. renderer.jsの6行目のブレークポイントがヒットするはずです。これでレンダラープロセスをデバッグできます
   

2つのプロセスを同時にデバッグする

メインプロセスとレンダラープロセスの両方をデバッグすることを学んだので2つのデバッグセッションを同時に開始する混合コンフィグレーションの長所を利用できます。

1. デバッグビューを開き、'Electron: All'コンフィギュレーションを選択してください。これはVSCodeをメインプロセスとレンダラープロセスの両方に接続しスムーズな開発の流れを可能にします
2. ブレークポイントをファイルの任意の場所にセットしてください
3. 楽しんで🎉🔥