Windows でのデバッグ
Electron で、JavaScript アプリケーションではなく Electron 自体に起因すると考えられるクラッシュや問題が発生した場合、特にネイティブ/C++ デバッグに慣れていない開発者にとっては、デバッグが少し難しい場合があります。ただし、Visual Studio、Electron のホストされているシンボルサーバー、Electron のソースコードを使用することで、Electron のソースコード内でブレークポイントを設定したステップスルーデバッグを有効にすることができます。
関連項目: Chromium のデバッグに関する情報は豊富にあり、その多くは Electron にも当てはまります。Chromium 開発者サイトを参照してください: Windows での Chromium のデバッグ。
要件
-
**Electron のデバッグビルド**: 最も簡単な方法は、通常、Windows のビルド手順に記載されているツールと前提条件を使用して、自分でビルドすることです。直接ダウンロードした Electron にアタッチしてデバッグすることもできますが、高度に最適化されているため、デバッグが大幅に難しくなります。デバッガーはすべての変数の内容を表示できず、インライン化、末尾呼び出し、その他のコンパイラの最適化により、実行パスが奇妙に見える場合があります。
-
**C++ ツールを搭載した Visual Studio**: 無料の Community Edition の Visual Studio 2013 と Visual Studio 2015 はどちらも動作します。インストールしたら、Visual Studio を 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` エントリが表示されます。1 つはメインプロセス用、もう 1 つはレンダラープロセス用です。リストには名前しか表示されないため、現在、どちらがどれかを確実に判断する方法はありません。
どのプロセスにアタッチすればよいですか？
メインプロセス内で実行されるコード (つまり、メインの JavaScript ファイルで見つかったか、最終的に実行されたコード) はメインプロセス内で実行され、他のコードはそれぞれのレンダラープロセス内で実行されます。
デバッグ時に複数のプログラムにアタッチできますが、デバッガーでアクティブになるプログラムは常に 1 つだけです。アクティブなプログラムは、[デバッグの場所] ツールバーまたは [プロセス] ウィンドウで設定できます。
ProcMon を使用したプロセスの監視
Visual Studio は特定のコードパスを検査するのに最適ですが、ProcMon の強みは、アプリケーションがオペレーティングシステムで行っているすべてを監視することです。ファイル、レジストリ、ネットワーク、プロセス、およびプロファイリングの詳細をキャプチャします。発生する**すべて**のイベントをログに記録しようとしますが、非常に圧倒される可能性があります。ただし、アプリケーションがオペレーティングシステムに対して何を行い、どのように行っているかを理解しようとする場合は、貴重なリソースとなる可能性があります.
ProcMon の基本および高度なデバッグ機能の概要については、Microsoft が提供するこのビデオリュートリアルをご覧ください。
WinDbg の使用
WinDbg を使用して、レンダラープロセスでのクラッシュと問題をデバッグできます。
WinDbg でプロセスをデバッグするためにアタッチするには
- `--renderer-startup-dialog` をコマンドラインフラグとして Electron に追加します。
- デバッグするアプリを起動します。
- pid が表示されたダイアログボックスが表示されます。「pid: 1234 でレンダラーを開始しています」。
- WinDbg を起動し、アプリケーションメニューで [ファイル] > [プロセスにアタッチ] を選択します。
- 手順 3 のダイアログボックスに pid を入力します。
- デバッガーが一時停止状態になり、アプリにテキストを入力するためのコマンドラインがあることを確認します。
- 上記のコマンドラインに「g」と入力して、デバッグ対象を開始します。
- Enter キーを押してプログラムを続行します。
- ダイアログボックスに戻り、[OK] を押します。