Electronで作成したアプリをIntelliJ IDEAでデバッグする

はじめに

Electronで作成したアプリをIntelliJ IDEAでデバッグするための設定をご紹介したいと思います。
本設定をすることで、Electronのメインプロセス、レンダラープロセス共にIntelliJ IDEAからデバッグできるようになります。

環境

  • IntelliJ IDEA 2019.2.3 (Ultimate Edition)
  • Electron 6.0.10

メインプロセスをデバッグするための設定

Edit Configurationsを選択して、Run/Debug Configurationsダイアログを開きます。

ダイアログ左上の+ボタンを押して、一覧からNode.jsを選択します。

下記の通り、Node.jsの設定を行ってください。

項目名 設定値
Name debug main process(任意の名前)
Node interpreter プロジェクトフォルダ配下のnode_modules/.bin/electron.cmd
Node parameters .
Application parameters –remote-debugging-port=9222(任意のポート番号)

Apply選択後、OKボタンを選択して、ダイアログを閉じます。

以上でメインプロセスをデバッグするための設定は完了です。

レンダラープロセスをデバッグするための設定

Edit Configurationsを選択して、Run/Debug Configurationsダイアログを開きます。

ダイアログ左上の+ボタンを押して、一覧からAttach to Node.js/Chromeを選択します。

下記の通り、Attach to Node.js/Chromeの設定を行ってください。

項目名 設定値
Name debug renderer process(任意の名前)
Port 9222(メインプロセスで設定したポート番号)

Apply選択後、OKボタンを選択して、ダイアログを閉じます。

以上でレンダラープロセスをデバッグするための設定は完了です。

アプリの起動

debug main processを選択して、デバッグ実行します。

debug renderer processを選択して、デバッグ実行します。

これでIntelliJ IDEAで表示しているソースコード上にブレークポイントを設定して、デバッグができるようになりました。

まとめ

Electronで作成したアプリをIntelliJ IDEAでデバッグするための設定について、ご紹介しました。
本設定をすることで効率よく開発を進められるのではないでしょうか。

 

システム開発のご相談はこちらからお気軽にお問合せください。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です