電子アプリケーションをデバッグするためのヒントとコツ

電子アプリケーションのデバッグガイド：Chrome開発者ツールを効率的に利用し、VSコード

この記事では、レンダリングプロセスのデバッグ方法とメインプロセスをカバーする、電子アプリケーションを効率的にデバッグする方法を紹介します。

コアポイント

電子アプリは、Chrome開発者ツールを使用して直接デバッグできます。アプリメニュー、ショートカットキー、または
• メソッドからアクセスできます。 BrowserWindow.openDevTools()
メインプロセスのデバッグは比較的複雑であり、ノードインスペクターのサポートは限られています。 VSコードが推奨されます。これは、リッチなノードアプリケーションデバッグツールを提供します。
vsコードは、カスタムビルドタスクとデバッグ構成をサポートし、ブレークポイントの設定、コールスタックのチェック、変数の表示、リアルタイムコンソールの使用により、エラーのデバッグとトラブルシューティングが容易になります。

レンダリングプロセスデバッグ

図1：Chrome開発者ツールは、ブラウザアプリケーションと同じレンダリングプロセスで使用されます。

電子アプリのデフォルトメニューは、Chrome開発者ツールを開くコマンドを提供します。メニューをカスタマイズして、この機能を削除することもできます。

図2：開発者ツールは、電子のデフォルトメニューに切り替えることができます。

さらに、

macosの

を使用するか、Windows/LinuxでCmd Opt Iショートカットキーを使用したり、Ctrl Shift IインスタンスのBrowserWindowメソッドを介して開発者ツールをプログラムで開くことができます。 webContents.openDevTools()

<code class="language-javascript">app.on('ready', () => {
  mainWindow = new BrowserWindow();
  mainWindow.loadURL(`file://${__dirname}/index.html`);
  mainWindow.webContents.openDevTools();
  mainWindow.on('closed', () => {
    mainWindow = null;
  });
});</code>

コード例：メインウィンドウがロードされた後、プログラムで開発者ツールを開きます。

メインプロセスデバッグ

メインプロセスのデバッグは困難であり、ノードインスペクターのサポートは限られています。電子アプリは、リモートデバッグ（デフォルトのポート5858）を有効にするために

パラメーターで開始できますが、公式ドキュメントのノード検査官のサポートは完全には改善されていません。 --debug

vsコードを使用してメインプロセスをデバッグします

vsコードは、電子上にも構築されたフリーでオープンソースIDEです。これは、電子アプリケーションのデバッグに非常に適しています。

ビルドタスクをすばやくセットアップします：Windowsで

を押し、macosでCtrl Shift Bを押し、VSコードはビルドタスクの作成を求めます（図3を参照してください）。 Cmd Shift B

図3：ビルドタスクがない場合、ビルドタスクをトリガーすると作成が促されます。

（windows）または

（macos）を押し、「タスク」を入力し、「タスクを選択する：タスクランナーを構成」を選択することもできます。 >ファイルして開きます。 Ctrl Shift P

各プラットフォームでビルドとデバッグのタスクをセットアップしてデバッグする方法は似ていますが、異なるオペレーティングシステムで生成された事前に構築されたバイナリファイルの名前は異なります。 Linux。 electron-prebuilt electron.exe Electron.appelectronvsコード（tasks.json）

のビルドタスクをセットアップします
をシステムの対応する名前に置き換えてください。

<code class="language-javascript">app.on('ready', () => {
  mainWindow = new BrowserWindow();
  mainWindow.loadURL(`file://${__dirname}/index.html`);
  mainWindow.webContents.openDevTools();
  mainWindow.on('closed', () => {
    mainWindow = null;
  });
});</code>

さて、Windows/Linuxで

またはmacOSで<name-of-binary></name-of-binary>を押すと、電子アプリが開始されます。これは、VSコードでデバッグを設定するために重要であるだけでなく、アプリケーションを開始するための便利な方法でもあります。次のステップは、アプリを起動して組み込みデバッガーに接続するためにVSコードを設定することです。

Ctrl Shift Bデバッガーに接続Cmd Shift B

図4：デバッグパネルで、ギアアイコンをクリックし、VSコードがデバッガーを開始するための構成ファイルを作成します。

スタートアップタスクを作成するには、左パネルのデバッグタブに移動し、ピニオンをクリックします（図4）。 VSコードは、作成する構成ファイルのタイプを尋ねます。 「node.js」を選択し、ファイルの内容を次の例の構成に置き換えます。

をシステムの対応する名前に置き換えてください。

起動構成の詳細については、こちらをご覧ください。

<code class="language-json">{
  "version": "0.1.0",
  "command": "node_modules/electron-prebuilt/dist/<name-of-binary>",
  "args": ["lib/main.js"]
}</name-of-binary></code>

これら2つの構成ファイルを使用すると、任意の行の左側のマージンをクリックしてブレークポイントを設定し、

を押してアプリケーションを実行できます。実行はブレークポイントで一時停止し、コールスタックを確認し、スコープ内の変数を表示し、リアルタイムコンソールと対話できます。ブレークポイントは、コードをデバッグする唯一の方法ではありません。また、特定の表現を監視したり、猛攻撃の例外がスローされているときにデバッガーに移動することもできます。 <name-of-binary></name-of-binary>

図5：VSコードの組み込みデバッガーを使用すると、アプリケーションの実行を一時停止し、エラーを深く調査できます。 F5

概要

これらのデバッグ技術をマスターして、電子アプリケーションをより効率的に開発および維持できるようにします。

（元のFAQとメインテキストが複製され、長さが長いため、FAQの部分は省略されています。冗長性を回避するために、コアデバッグメソッドの導入のみがここに保持されます。） >

以上が電子アプリケーションをデバッグするためのヒントとコツの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。