Electron-デバッグ

アプリケーションを実行する2つのプロセス、メインプロセスとレンダラープロセスがあります。

レンダラープロセスはブラウザウィンドウで実行されるプロセスなので、Chrome Devtoolsを使用してデバッグできます。 DevToolsを開くには、ショートカット「Ctrl + Shift + I」または<F12>キーを使用します。 devtools こちらの使用方法を確認できます。

DevToolsを開くと、アプリは次のスクリーンショットに示すようになります-

DevTools

メインプロセスのデバッグ

ElectronブラウザーウィンドウのDevToolsは、そのウィンドウ（つまりWebページ）で実行されるJavaScriptのみをデバッグできます。メインプロセスで実行されるJavaScriptをデバッグするには、外部デバッガーを使用し、-- debug_または-- debug-brk_スイッチを使用してElectronを起動する必要があります。

Electronは、指定されたポートでV8デバッガープロトコルメッセージをリッスンします。外部デバッガーはこのポートに接続する必要があります。デフォルトのポートは5858です。

次を使用してアプリを実行します-

$ electron --debug = 5858 ./main.js

次に、V8デバッガープロトコルをサポートするデバッガーが必要になります。この目的には、VSCodeまたはノードインスペクターを使用できます。たとえば、次の手順に従って、この目的のためにVSCodeをセットアップします。それを設定するには、次の手順に従ってください-

VSCodeをダウンロードしてインストールします。 ElectronプロジェクトをVSCodeで開きます。

次の構成でファイル .vscode/launch.json を追加します-

{
   "version": "1.0.0",
   "configurations": [
      {
         "name": "Debug Main Process",
         "type": "node",
         "request": "launch",
         "cwd": "${workspaceRoot}",
         "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
         "program": "${workspaceRoot}/main.js"
      }
   ]
}

注-Windowsの場合、 runtimeExecutable には "$ \ {workspaceRoot}/node_modules/.bin/electron.cmd" を使用します。

*main.js* にいくつかのブレークポイントを設定し、デバッグビューでデバッグを開始します。 あなたがブレークポイントをヒットすると、画面は次のようになります-

デバッガ

VSCodeデバッガーは非常に強力で、エラーをすばやく修正するのに役立ちます。 Electronアプリをデバッグするための node-inspector のような他のオプションもあります。

Electron-debugging

Electron-デバッグ

メインプロセスのデバッグ