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

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

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

# 最初に
1. 最新のVSCodeがインストールされていることを確認してください
2. VSCodeに最新の[Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)がインストールされていることを確認してください
3. このガイドは[electron-Quick-start project](https://github.com/electron/electron-quick-start)の利用を想定してします。最初にリポジトリを`clone`してください

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

# launch.jsonファイルを設定する
- アクティビティーバーのデバッグアイコンをクリックしてデバッグビューを表示してください。次にlaunch.jsonファイルを設定するために歯車アイコンをクリックし**Chrome**を環境として選択してください
![configure_launch.png](https://qiita-image-store.s3.amazonaws.com/0/108936/1a018ba2-b7f1-33ff-68df-6dbb2d911ff6.png)
- 生成された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行目でブレークポイントがヒットするはずです
![breakpoint_main.png](https://qiita-image-store.s3.amazonaws.com/0/108936/7a317f29-8894-c9cf-19f7-ba27ca16fa47.png)

# レンダラープロセスをデバッグする
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行目のブレークポイントがヒットするはずです。これでレンダラープロセスをデバッグできます
![breakpoint_renderer.png](https://qiita-image-store.s3.amazonaws.com/0/108936/ea62dc20-b2bc-b1e0-de80-728d1bb39c45.png)

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

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