Devtronの使い方

Devtronのインストール後、どのように使うのかを説明します。

1. Require Graph(コードの依存関係の可視化)

[Require Graph]のメニューでは、アプリの内部と外部のライブラリーの依存関係を可視化します。

[Load Graph]ボタンをクリックすると、メインプロセス、レンダラープロセスのそれぞれのJavaScriptファイルのロード順と依存関係のグラフが表示されます。

2. Event Listeners(コア部分に登録されているイベントの可視化)

[Event Listeners]メニューでは、ウィンドウ、アプリケーション、およびメインとレンダラプロセスなどのコア部分に登録されたイベントリスナーを確認できます。

JavaScriptのイベントはメモリリークの原因になりやすかったり、登録箇所が特定しにくいといったことがあるので、可視化によってデバッグが便利になるでしょう。

[Load Listeners]ボタンをクリックすると、登録されているイベントリスナーの確認ができます。

▲ メインプロセスで登録されているイベントの内容が確認できた。

3. IPC Monitor(プロセス間通信の監視)

[IPC Monitor]メニューでは「メインプロセス」と「レンダラープロセス」のプロセス間の通信を監視します。

Electronアプリではアプリの起動を行い、アプリの終了まで起動している「メインプロセス」とブラウザー側の処理を受け持ち、個別に終了可能な「レンダラープロセス」に分かれています。

例えば、タスクトレイやシステムメニューはアプリが起動している間は管理する必要があるため、普通はメインプロセス側で管理します。そのためブラウザー側(レンダラープロセス)の処理からタスクトレイ(メインプロセス)に命令を出す場合には「IPC」というプロセス間通信の機能を使う必要があります。

次のイメージのように[● Record]ボタンをクリックして、「記録」状態にすると、IPCの送受信でどのような変数が渡されたかを見られます。

4. Lint(アプリに必要な機能の検証)

[Lint]メニューでは、Electronアプリに問題や不足している機能がないかを確認できます。具体的な内容は次の5項目です。

  • 最新のElectronを使用しているか
  • asar形式でアーカイブされているか
  • アプリケーションがクラッシュされた時のイベントを登録しているか
  • アプリケーションの応答が無くなった時のイベントを登録しているか
  • 原因不明のエラーが発生した時のイベントを登録しているか

次のイメージでは、[Listening for crash events」(アプリケーションがクラッシュされた時のイベントを登録しているか?)がNGとなっています。このようにNGの場合は手引きやドキュメントへのリンク、実際どのようにコードを書けばいいのかといったコードスニペットを表示してくれます。[Lint App]ボタンをクリックすると、アプリケーションの状態のチェックを行います。

終わりに

Devtronを使うことで、いままではなかなか検証しづらかった部分が可視化されデバッグできるようになりました。今後はより品質の高いElectronアプリが作れるでしょう。Devtronは手軽に導入できるため、Electronアプリを作成している皆さまはぜひお試しください。

次回はElectronのAPIをテストできるフレームワーク「Spectron」について紹介します。