Intellijでelectronのデバッグを行う設定

# はじめに
この記事は、Mac環境のIntellijでElectronのデバッグ起動の方法についてまとめたものです。
ElectronはMainとRendererの2つのプロセスがありますがどちらもデバッグできます。

今回の設定を行なった環境は以下になります。

- macOS 10.14.6
- IntelliJ IDEA 2019.3 (Ultimate Edition)
- node v12.4.0
- electron v7.1.3

今回使用したソースコードは[こちら](https://github.com/r-nouchi/react-electron/tree/de020f284944d56ae2db09e39bee05df3f66e89b)

# TL;DR
Run/Debug configuration に設定を作成することで簡単にデバッグできるようになります。

# サンプルコードについて
今回使用したサンプルコードは `create-react-app` で作成したReactアプリケーションをElectronで動作するように簡単な修正を加えたものです。デバッグ起動について試すだけならわざわざ `create-react-app` を使う必要もないのですが、実際の開発では `create-react-app` を使用することが多いのでなるべく環境を合わせるために使用しています。

# 設定方法
実際に設定方法をみていきましょう。Cmd + Shift + a でFind Actionsウィンドウを表示し `Edit configuration` を選択します。
![スクリーンショット 2019-12-08 18.04.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306956/90de433d-d9f9-c0f6-4ad4-34d334d22eed.png)

もしくは画面右上のプルダウンから選択します。

![スクリーンショット 2019-12-08 17.55.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306956/6c2152a0-585d-683b-23c6-7eceaae6fb92.png)

## Mainプロセス
まずはMainプロセスから設定します。ウィンドウ左上の＋マークをクリックして、リストの中からNode.jsを選択します。

![スクリーンショット 2019-12-08 18.07.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306956/d9e9898b-6828-8118-7d12-502acaf835ce.png)

後は設定を記述すればOKです。パスは自分の環境に合わせて適宜読み替えてください。
Environment variablesは `create-react-app` のwebpack dev serverを使用するための値です。使用していない場合は設定しなくても構いません。

![スクリーンショット 2019-12-08 17.56.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306956/fa8e33d6-af32-271e-5384-ae7857b63258.png)

設定ができたら右下のOKボタンを押して設定を保存します。

右上のデバッグボタンを押せば起動できます。ためしにMainプロセスのソースコードにブレークポイントを設置して起動してみましょう。
![スクリーンショット 2019-12-08 17.55.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306956/23662333-9ebb-dd8a-8c30-a8681e22e4c7.png)

アプリがデバッグモードで立ち上がりました。
![スクリーンショット 2019-12-08 17.58.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306956/3adedc06-75fc-72f1-c9a7-6b623a9989c3.png)

ブレークポイントでちゃんと止まっているのがわかるかと思います。
![スクリーンショット 2019-12-08 17.59.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306956/4f11c22d-230e-a812-e8ca-399241659439.png)
![スクリーンショット 2019-12-08 17.59.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306956/30665b81-b30f-4e71-af0a-657af5c57cd4.png)

## Rendererプロセス
続いてRendererプロセスです。Rendererプロセスのデバッグには[Chrome DevTools Protocol](https://chromedevtools.github.io/devtools-protocol/)なるものを使用します。なにやら聞きなれないものが出てきますが起動時のパラメータを追加するだけでOKです。便利ですね。

Mainプロセスの時と同様Run configurationを開き+マークをクリックして今度は Attach to Node.js/Chromeを選択します。

![スクリーンショット 2019-12-08 18.15.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306956/4643e86b-2d6d-9c84-d968-69c4cc1ae046.png)

- host: localhost
- port 9229

を設定して保存します。

![スクリーンショット 2019-12-08 18.17.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306956/2f46d76c-07ac-d330-31a8-ee213efe9fcc.png)

先ほど設定したMainプロセスの設定を開き、Application parametersに `--remote-debugging-port=9229` を設定します。

![スクリーンショット 2019-12-08 17.56.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306956/93ceb07d-d324-2a3a-04a5-7098cdbea621.png)

以上で設定は終了です。あとはMainプロセスの時と同様にデバッグ起動を行います。この時、Mainプロセス⇨Rendererプロセスの順番に起動しましょう。

こちらもRendererプロセスに設定したブレークポイントで止まることがわかります。

![スクリーンショット 2019-12-08 18.01.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306956/aeaae2d4-029c-4fc4-0b6c-d7b12e9d6aa0.png)

![スクリーンショット 2019-12-08 18.01.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306956/a526e065-6283-f723-bccc-6779b90c7ca1.png)


# まとめ
これでElectronアプリケーションの開発でもデバッグを行うことができるようになりました。便利ですね。


# 参考
- [Building an Electron application with create-react-app](https://www.freecodecamp.org/news/building-an-electron-application-with-create-react-app-97945861647c/)
- [Getting started with Electron in WebStorm](https://blog.jetbrains.com/webstorm/2016/05/getting-started-with-electron-in-webstorm/)