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

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

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

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

ソースの修正

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

/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コメントアウトする。

/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

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

ターミナルでnpm startを実行する。
しばらく待つとアプリケーションが表示されるので、その後electron-renderを選択してDebugボタンを押す。
/scr/app/components/home/home.component.tsのngOnInit()の行にブレークポイントを打つ。
アプリケーション上でCtrl+Rでアプリをリロードした際に、ブレークポイントで止まればOK。

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

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

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

ソースの修正

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

/package.json

{
  ...,
---  "electron:tsc": "tsc main.ts 
+++  "electron:tsc": "tsc main.ts --sourceMap true",
  ...,
}

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

/.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は、そのまま描画プロセスのデバッガをアタッチしたい場合に設定。

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

ターミナルで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利用の場合)
Run -> Edit Configurations -> + -> Compoundで上記で作成したnpm startとelectron-renderを追加する。
上で作成した実行設定を選択してデバッグ実行すると、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/