Electron-デバッグ
アプリケーションを実行するプロセスは、メインプロセスとレンダラープロセスの2つです。
レンダラープロセスはブラウザーウィンドウで実行されるプロセスであるため、ChromeDevtoolsを使用してデバッグできます。DevToolsを開くには、ショートカット「Ctrl + Shift + I」または<F12>キーを使用します。devtoolsの使用方法はこちらで確認できます。
DevToolsを開くと、アプリは次のスクリーンショットのようになります-
メインプロセスのデバッグ
ElectronブラウザウィンドウのDevToolsは、そのウィンドウ(つまり、Webページ)で実行されるJavaScriptのみをデバッグできます。メインプロセスで実行されるJavaScriptをデバッグするには、外部デバッガーを使用し、-debugまたは--debug-brkスイッチを指定してElectronを起動する必要があります。
Electronは、指定されたポートでV8デバッガプロトコルメッセージをリッスンします。外部デバッガーはこのポートに接続する必要があります。デフォルトのポートは5858です。
以下を使用してアプリを実行します-
$ electron --debug = 5858 ./main.js
次に、V8デバッガプロトコルをサポートするデバッガが必要になります。この目的のために、VSCodeまたはnode-inspectorを使用できます。たとえば、次の手順に従って、この目的のために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"
}
]
}
Note − Windowsの場合、 "${workspaceRoot}/node_modules/.bin/electron.cmd" にとって runtimeExecutable。
にいくつかのブレークポイントを設定します main.js、およびデバッグビューでデバッグを開始します。ブレークポイントに到達すると、画面は次のようになります-
VSCodeデバッガーは非常に強力であり、エラーをすばやく修正するのに役立ちます。他にも次のようなオプションがありますnode-inspector 電子アプリのデバッグ用。