この記事は「Electron入門記事連載」の一部です。

2016年5月11日、米GitHub社から「Electron 1.0」がリリースされました(参照「Electron 1.0 – 公式ブログより」)。合わせて周辺ツールとして、ElectronのAPIが学べるアプリの「Electron API Demos」、デバッガーの拡張機能の「Devtron 1.0(デブトロン)」、テストフレームワークの「Spectron 3.0(スペクトロン)」が同時に公開されています。

今回は周辺ツールの中の1つ、Devtronについて紹介します。Devtronを使うと今までのElectronのデバッガーの[Developer Tool]本体だけでは検証しづらかった部分が可視化されデバッグできるようになりました。具体的には、「不要なコードが混入していないか」「不要なイベントを登録していないか」「バグを引き起こすプロセス間通信はいつ起こったか」「アプリに本当に必要な機能は足りているのか」といった問題を可視化できます。

この記事ではDevtronの概要、インストールの仕方、使い方について説明します。

devtron official capture

▲ 本記事で紹介する「Devtron」(公式ブログのキャプチャー)

ElectronのデバッガーのDevtronについて

Devtronには次の4つの機能があります。

  • Require Graph(コードの依存関係の可視化)
  • Event Listeners(コア部分に登録されているイベントの可視化)
  • IPC Monitor(プロセス間通信の監視
  • Lint(アプリに必要な機能の検証)

実際に動かしている動画を撮りました。次の動画をご覧ください。

※今回はElectron v1.2.1、Devtron 1.1.2を使用し、OS X 10.11 El Capitanにて動作検証を行いました。

次のページでは、Devtronのインストールの仕方について説明します。