WebStormでangular-electronを使ったアプリをデバッグ実行する設定

[angular-electron](https://github.com/maximegris/angular-electron)を利用して、Angular & TypeScript で開発を行う際に Web Storm 上でのデバッグ実行をする方法のメモです。
試行錯誤しながらなので、最適化されていないかもしれません。

## 前提条件

##### 実行環境

* OS: Windows
* Node: v8.9.3 (Nodistでインストール)
* NPM: v5.5.1
* WebStorm: v2018.1.4

##### 使用バージョン

* angular-electron: v4.1.0
  * Angular: v6.0.5
  * Electron: v2.0.3


## 下準備

```
git clone https://github.com/maximegris/angular-electron.git your-app-name
cd (path/to/project)
npm install  # 固まったままわりと時間がかかるかもしれないが気長に待つ
npm start
```

以下のような画面が立ち上がればOK
<img src="https://qiita-image-store.s3.amazonaws.com/0/273783/4c1c9204-35ee-fd72-ade5-d5a9776634cc.png" width="50%" />

> アプリケーション名の変更、Gitリポジトリの初期化などは適宜行っておく。


## 描画プロセスのデバッグ実行設定

### ソースの修正

* `package.json`-`scripts`-`electron:serve`の末尾に`--remote-debugging-port=9222`を追加する。 

```diff:/package.json
{
  ...,
---  "electron:serve": "wait-on http-get://localhost:4200/ && npm run electron:tsc && electron .,
+++  "electron:serve": "wait-on http-get://localhost:4200/ && npm run electron:tsc && electron . --serve --remote-debugging-port=9222",
  ...,
}
```

* `main.ts`内でDevToolを開いている部分を削除orコメントアウトする。

```typescript:/main.ts
// win.webContents.openDevTools();
```

> DevToolが開いている状態だと、後にデバッグ実行した際に以下のようなエラーが表示される。
> `Another debugger is attached, please ensure that DevTools is closed or restart application to force detach`
> ソース上で無効化せずにDevToolを閉じてからデバッグ実行するのでもOK。

### WebStorm上の設定

`Run -> Edit Configurations -> + -> Attach to Node.js/Chrome`

* Name: 任意 (e.g. electron-render)
* Port: 9222 (`package.json`の`--remote-debugging-port`と同じにする)
* 残りはDefaultでOK
<img src="https://qiita-image-store.s3.amazonaws.com/0/273783/0bdd59b6-1b06-7786-4083-c20a5d861dfb.png" width="90%">

### デバッグ実行 (動作確認)

* ターミナルで`npm start`を実行する。
* しばらく待つとアプリケーションが表示されるので、その後`electron-render`を選択して`Debug`ボタンを押す。
<img src="https://qiita-image-store.s3.amazonaws.com/0/273783/37c2f5f2-3851-79a9-fe70-4bdb3ec4eeb8.png" width="90%">

* `/scr/app/components/home/home.component.ts`の`ngOnInit()`の行にブレークポイントを打つ。
<img src="https://qiita-image-store.s3.amazonaws.com/0/273783/4f4f9ca7-19c4-7795-7b1e-f974c95807cd.png" width="90%">

* アプリケーション上で`Ctrl+R`でアプリをリロードした際に、ブレークポイントで止まればOK。

> `Another debugger is attached`のエラーが出た場合は、DevToolsが表示されていないかどうか、他のプロセスが残っていないかなどを確認する。

## メインプロセスのデバッグ実行設定

> 描画プロセス(Angular部分)だけで十分ならばこの設定はしなくてもよい。

### ソースの修正

* `package.json`-`scripts`-`electron:tsc`の末尾に`--sourceMap true`を追加する。 

```diff:/package.json
{
  ...,
---  "electron:tsc": "tsc main.ts 
+++  "electron:tsc": "tsc main.ts --sourceMap true",
  ...,
}
```

* 上記の設定によりプロジェクト直下にマップファイルが生成されるようになるため、`.gitignore`の設定を追加する

```diff:/.gitignore
...
main.js
+++ main.js.map
...
```

### WebStorm上の設定

`Run -> Edit Configurations -> + -> Node.js`

* Name: 任意 (e.g. electron-main)
* Node interpreter: \(path\to\project)\node_modules\.bin\electron.cmd
* Node parameters: .
* Working directory: \(path\to\project)
* JavaScript file: dist\main.js
* Application parameters: --remote-debugging-port=9222
* 残りはDefaultでOK

> * Windowsの場合、`Node interpreter`は必ず`.cmd`を手で打つか、`node_modules\electron\dist\electron`にする。
> * `Application parameters`の`--remote-debugging-port=9222`は、そのまま描画プロセスのデバッガをアタッチしたい場合に設定。

<img src="https://qiita-image-store.s3.amazonaws.com/0/273783/cc7526b8-65fd-0399-a15e-9f90970da233.png" width="90%">

### デバッグ実行 (動作確認)

* ターミナルで`npm run build`を実行する。
* `/main.ts`の適当な部分にブレークポイントを打っておく。
* `electron-main`を選択して`Debug`ボタンを押す。
* アプリケーションが立ち上がる前にブレークポイントで止まればOK。
* その後描画プロセスのデバッグをしたい場合は、`electron-render`も追加でデバッグ実行すればよい。  
  ただしこの場合は Hot Reload にはならない。



## その他便利かもしれない設定

###  Coding Assistance

以下で`Node.js core APIs`用のコードアシスタンスを利用できる

`Settings -> Languages & Frameworks -> Node.js and NPM -> ✓ Coding assistance for Node.js`

### npm startと描画プロセスのデバッグを自動で実行する

`electron-render`の前に`npm start`を実行するようにしておけば、いちいち別々に実行する必要がなくなる。

* `Run -> Edit Configurations -> + -> Node.js`で図のように設定(Node/NPMのパスはNodist利用の場合)
<img src="https://qiita-image-store.s3.amazonaws.com/0/273783/934ce4b5-803b-2986-467d-d19658f96b6a.png" width="90%">

* `Run -> Edit Configurations -> + -> Compound`で上記で作成した`npm start`と`electron-render`を追加する。
<img src="https://qiita-image-store.s3.amazonaws.com/0/273783/0d924b27-36d7-a671-d01e-d96236bf6239.png" width="90%">

* 上で作成した実行設定を選択してデバッグ実行すると、`npm start`と`electron-render`が同時に実行される。


## 参考

https://github.com/maximegris/angular-electron/issues/84#issuecomment-357424682
http://blog-test123.jetbrains.com/webstorm/2016/05/getting-started-with-electron-in-webstorm/