今回は、Electron開発時のデバッグ設定についてのメモです。
デバッグ対象となるElectronのアプリは、純粋なHTML + JavaScript + CSSのみで構成される想定での設定です。
目次
環境
- Node.js：v24.11.1
- Electron：v27.3.11
開発者ツール表示
Web開発時に利用するChrome開発者ツールの表示方法です。
フロントエンドをいじっている人であればお馴染みのディベロッパーツール表示です。
以下関数を利用します。
mainWindow.webContents.openDevTools()https://www.electronjs.org/ja/docs/latest/tutorial/application-debugging
実装例
function createWindow() {
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
contextIsolation: true,
nodeIntegration: false
}
});
mainWindow.loadFile('index.html');
// 開発時にDevToolsを開く
mainWindow.webContents.openDevTools();
}mainWindowを作成した後に指定する必要があります。
// 1. loadFile の直後
mainWindow.loadFile('index.html');
mainWindow.webContents.openDevTools();
// 2. ウィンドウ作成の最後
const mainWindow = new BrowserWindow({...});
mainWindow.loadFile('index.html');
mainWindow.webContents.openDevTools();
// 3. コンテンツ読込完了後
mainWindow.webContents.on('did-finish-load', () => {
mainWindow.webContents.openDevTools();
});
// 4. createWindow 関数の外でも可能
app.whenReady().then(() => {
const win = createWindow();
win.webContents.openDevTools();
});デバッグ確認範囲
開発者ツールでデバッグできる範囲は、
スクリプトタグで読み込まれたjsなど、Chromiumが読み込んで認識できる範囲となります。
メインプロセス(Node.js)実行しているmain.js等の部分は範囲外となります。
関連
用途は限られていますが、webContentsでディベロッパーツールの操作処理などもサポートしています。
https://www.electronjs.org/ja/docs/latest/api/web-contents
// DevToolsを閉じる
mainWindow.webContents.closeDevTools();
// DevToolsの開閉状態を確認
const isOpen = mainWindow.webContents.isDevToolsOpened();
// DevToolsの表示/非表示を切り替え
mainWindow.webContents.toggleDevTools();
// DevToolsにフォーカス
mainWindow.webContents.devToolsWebContents.focus();メインプロセスデバッグ(VSCode)
https://www.electronjs.org/ja/docs/latest/tutorial/debugging-vscode
まずlaunch.jsonを作成します。
launch.jsonの内容を以下のような編集します。
{
"version": "0.2.0",
"configurations": [
{
"name": "Electron: Main",
"type": "node",
"request": "launch",
"cwd": "${workspaceFolder}",
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
"windows": {
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
},
"args": ["."],
"outputCapture": "std"
}
]
}
メインプロセスの部分もステップ実行など行えます。
今回のメモは以上となります。
JavaScript(Webフロントエンド・バックエンド)の知識が必要ですが、
Electron以外でもよくある構造になっていますので、デバッグ設定も簡単に行えます。
