メインコンテンツへ飛ぶ

Windows におけるデバッグ

JavaScript アプリケーションに起因しないと思われるクラッシュや問題が Electron 上で起こった場合、特にネイティブ/ C++ デバッグの経験がない開発者にとって少しトリッキーなデバッグになります。 しかし、Visual Studio、Electron がホストするシンボルサーバーと Electron のソースコードを使用することで、Electron のソースコード内のブレークポイントを使ったステップスルーデバッグができます。

こちらも参照: Chromium のデバッグに関する豊富な情報があります。その多くは Chromium 開発者サイト (Debugging Chromium on Windows) の Electron にも適しています。

要件​

  • Electronのデバッグビルド: 最も簡単な方法は、ビルド手順 (Windows) にリストされているツールと必要な環境を使って、自分でビルドをする方法です。 Electron を直接ダウンロードしてアタッチしデバッグできますが、Electron は高度に最適化されているためデバッグが困難であることに気付くでしょう。デバッガはすべての変数の内容は表示できませんし、インラインに展開されたり、末尾再帰やその他のコンパイラによる最適化により実行経路は奇妙に見えるはずです。

  • Visual Studio with C++ Tools: Visual Studio 2013 と Visual Studio 2015 の無料コミュニティ版両方が動きます。 インストール後、Electron のシンボルサーバーを使うための設定を行います。 これによりVisual StudioがElectron内で起こっていることをより理解できるようになり、人が読める形式で現在の変数を表示することができます。

  • ProcMon: 無料の SysInternals ツールを使うことでプロセスパラメーター、ファイル操作、レジストリ操作を検査することができます。

Electronへの接続とデバッグ​

デバッグセッションを始めるには、PowerShell/CMD を開いて Electron のデバッグビルドを実行し、引数として開くアプリケーションを渡して使用します。

$ ./out/Testing/electron.exe ~/my-electron-app/

ブレークポイントの設定​

そして、Visual Studio を開きます。 Electron は Visual Studio でビルドされていないため、プロジェクトファイルは含まれていません。しかし、ソースコードファイルを "ファイルとして" 開くことができます。つまり、Visual Studio がそれ単独で開きます。 ブレークポイントを設定することもできます。 Visual Studio は、ソースコードがアタッチされたプロセスで実行されているコードと一致することを自動的に認識し、それに応じてブレークします。

関連コードファイルは ./shell/ にあります。

アタッチ​

ローカルまたはリモートコンピュータ上で実行中のプロセスに Visual Studio デバッガをアタッチできます。 プロセスを実行中にしてから、"プロセスにアタッチ" ダイアログを開くためにプロセスにデバッグ/アタッチをクリック (または CTRL+ALT+P を押下) します。 この機能を使用してローカルまたはリモートコンピュータ上で実行されているアプリをデバッグし、複数のプロセスを同時にデバッグすることができます。

Electron が異なるユーザアカウントで実行されている場合、すべてのユーザからのプロセスを表示する チェックボックスを選択してください。 開かれているアプリの BrowserWindow の数に応じて、複数のプロセスが表示されることに注意してください。 典型的な1ウインドウアプリは、Visual Studio に2つの Electron.exe エントリ - メインプロセス用とレンダラプロセス用を表示します。 リストは名前だけを表示するので、どちらがどちらであるかを把握する信頼できる方法は現在ありません。

どのプロセスにアタッチするべきか​

メインプロセス内から実行するコード (すなわちメイン JavaScript ファイル内から見られるコードまたは最終的に実行するコード) はメインプロセスで実行され、その他のコードはそれぞれのレンダラープロセスで実行されます。

デバッグ中は複数のプログラムにアタッチすることができますが、随時1つのプログラムだけがデバッガでアクティブになります。 デバッグの場所 ツールバーか プロセスウインドウ 内でアクティブなプログラムをセットできます。

プロセス監視にProcMonを使用する​

Visual Studio は特定のコードパスを検査するのには優れていますが、ProcMon の強みは、アプリケーションのオペレーティングシステムで行われているすべてのことを実際に監視していることです。プロセスのファイル、レジストリ、ネットワーク、プロセス、プロファイリングの詳細をキャプチャします。 すべてのイベントをログに記録しようするので非常に巨大になる可能性がありますが、アプリケーションがオペレーティングシステムに対して何をどのようにして行っているのかを理解しようとするには価値のあるリソースになるかもしれません。

ProcMon の基本及び高度なデバッグ機能については、Microsoft が提供する このビデオチュートリアル を参照してください。

WinDbg を使用する​

WinDbg を使用して、レンダラープロセスのクラッシュや問題をデバッグできます。

WinDbg を使用したデバッグプロセスへのアタッチ手順は以下の通りです。

  1. --renderer-startup-dialog を Electron のコマンドラインフラグとして追加します。
  2. デバッグするアプリを起動します。
  3. pid が記載されたダイアログボックスが “Renderer starting with pid: 1234” のように表示されます。
  4. WinDbg を起動し、アプリケーションメニューで "ファイル > プロセスにアタッチ" を選択します。
  5. 手順 3 のダイアログボックスの pid を入力します。
  6. デバッガーが一時停止状態であることと、アプリ内にテキストを入力するためのコマンドラインがあることを確認してください。
  7. 上のコマンドラインに "g" と入力してデバッグ対象を始動します。
  8. 何かのキーを押してプログラムを続行します。
  9. 先程のダイアログボックスに戻り、「OK」を押します。