Electron デバッグとテスト

Electron アプリケーションにはメインプロセスとレンダラープロセスという2つの実行環境があり、そのためデバッグとテストの戦略はプロセスごとに設計する必要があります。
良好なデバッグとテストのプロセスは、開発効率とアプリケーションの安定性を向上させることができます。

---

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

Chrome DevTools を使用したデバッグ

• Electron のメインプロセスは--inspect 或 --inspect-brkで起動し、Chrome DevTools でデバッグできます。

• 起動例：

  electron --inspect=9222 .

• Chrome のアドレスバーにchrome://inspectを入力すると、メインプロセスに接続してブレークポイントデバッグ、コールスタックの表示、式の実行ができます。

VS Code ブレークポイントデバッグ

• VS Code でlaunch.json：

  {
    "type": "node",
    "request": "launch",
    "name": "Electron Main",
    "program": "${workspaceFolder}/node_modules/electron/cli.js",
    "args": ["."],
    "runtimeExecutable": null,
    "windows": { "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd" },
    "sourceMaps": true,
    "protocol": "inspector"
  }

• を設定すると、メインプロセスファイルに直接ブレークポイントを設定し、ロジックと IPC 通信をデバッグできます。

ログ記録

• ログ記録にはconsole.logまたはサードパーティのログライブラリ（例：winston）を使用して、メインプロセスの実行情報を記録します。
• ログは info、warn、error に分類し、問題の特定を容易にすることをお勧めします。

---

レンダラープロセスのデバッグ

デベロッパーツールを開く

• レンダラープロセスで次のように呼び出します：

  mainWindow.webContents.openDevTools()

• DOM の確認、JS デバッグ、ネットワークリクエスト、パフォーマンスパネルを直接表示できます。

リモートデバッグ

• レンダラープロセスでもリモートデバッグポートを開くことができます：

  electron --remote-debugging-port=9223 .

• Chrome DevTools でリモートデバッグに接続でき、複数ウィンドウやデバイスをまたいだデバッグに適しています。

React / Vue DevTools

• フロントエンドフレームワークを使用するレンダラープロセスの場合は、対応する DevTools をインストールします：

  npm install --save-dev electron-devtools-installer

• 例：

  const { default: installExtension, REACT_DEVELOPER_TOOLS } = require('electron-devtools-installer')
  
  app.whenReady().then(() => {
    installExtension(REACT_DEVELOPER_TOOLS)
      .then(name => console.log(`已安装: ${name}`))
      .catch(err => console.log('安装失败:', err))
  })

• コンポーネントの状態、Props、イベントをデバッグでき、フロントエンド開発の効率が向上します。

---

自動化テスト

Spectron テストフレームワーク

• Spectron は Electron 公式が推奨するエンドツーエンドテストツールで、WebDriver をベースにしています。
• アプリケーションの起動、ウィンドウの動作、ボタンのクリック、IPC 呼び出しをテストできます。

  npm install --save-dev spectron mocha chai

• 例：

  const Application = require('spectron').Application
  const assert = require('chai').assert
  const path = require('path')
  
  describe('应用启动测试', function () {
    this.timeout(10000)
    let app
  
    before(async () => {
      app = new Application({
        path: require('electron'), // Electron 可执行文件
        args: [path.join(__dirname, '..')]
      })
      await app.start()
    })
  
    after(async () => { if (app && app.isRunning()) await app.stop() })
  
    it('窗口数量应为 1', async () => {
      const count = await app.client.getWindowCount()
      assert.equal(count, 1)
    })
  })

ユニットテスト

• メインプロセスのロジックやレンダラープロセスのモジュールに対してユニットテストを記述できます。
• Jest または Mocha + Chai の使用をお勧めします：npm install --save-dev jest

エンドツーエンドテスト

• ボタンのクリックや新しいウィンドウの表示、データのやり取りなど、ユーザー操作フローが正常かどうかをテストします。
• Spectron または Playwright + Electron と組み合わせることができます。

CI/CD 統合

継続的インテグレーションプラットフォーム（GitHub Actions、GitLab CI）で Electron テストを構成します：

• Node.js + Electron をインストール
• ユニットテストとエンドツーエンドテストを実行
• カバレッジレポートを生成してアップロード

---

まとめ

Electron デバッグとテストの核心ポイント：

• メインプロセス：Chrome DevTools または VS Code のブレークポイントデバッグ + ログ
• レンダラープロセス：デベロッパーツール + フロントエンドフレームワークの DevTools
• 自動化テスト：Spectron、ユニットテスト、エンドツーエンドテスト + CI/CD
• 目標：開発効率の向上、潜在的な問題の発見、アプリケーションの安定性の確保

その他の拡張