nukorouのゆるガバ帳

ゆるくガバく適当に

WebStormを使ってElectronのレンダラープロセスをデバッグする方法

Getting started with Electron in WebStorm | WebStorm公式ブログ丸パクリした参考にした。

手順

electron起動の設定をいじる

エディターの右上から f:id:nukorou:20161203124117p:plainf:id:nukorou:20161203124114p:plain

electronを選ぶ。設定してない人はEdit Configurationsを選ぶ。

f:id:nukorou:20161203124115p:plain

Application parameterに--remote-debugging-port=9222を設定する。ポートはお好きに設定してください。

f:id:nukorou:20161203123929p:plain

Chromium Remoteの設定をする

f:id:nukorou:20161203124118p:plain

エディター右上からEdit Configuration→Chromium Remoteを選ぶ。 さっき設定したポートと同じのが書かれているかをみる。上で9222やった人は何もしなくて大丈夫なはず。

f:id:nukorou:20161203124110p:plain

デバッグモードで起動する

ElectronのメインプロセスもデバッグしたければElectronもデバッグモードで起動する。起動したらChromium Remoteをデバッグモードで起動する。ここでもし、Electronのアプリに開発者ツールがでてるのなら消しておかないと怒られる。あとは、ブレークポイント貼って止まるか確認して終了。

お疲れ様でした。