#デバックツールの起動
ChromeブラウザのF12を押して起動するデバックツールを使えるようにします。
IDEのリモートデバック機能で、ステップ実行できるのは、メインプロセスのみとなります。
レンダリングプロセスをデバックするのは、Webページをデバックするのと同じ要領となります。
main.js
"use strict";
const electron = require("electron");
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
let mainWindow;
// 全てのウィンドウが閉じたら終了
app.on('window-all-closed', function() {
if (process.platform != 'darwin') {
app.quit();
}
});
// Electronの初期化完了後に実行
app.on('ready', function() {
// メイン画面の表示。ウィンドウの幅、高さを指定できる
mainWindow = new BrowserWindow({
width: 1024,
height: 800,
icon: __dirname + '/src/icons/comix.ico',
});
mainWindow.loadURL('file://' + __dirname + '/index.html');
mainWindow.webContents.openDevTools();
// ウィンドウが閉じられたらアプリも終了
mainWindow.on('closed', function() {
mainWindow = null;
});
});
#VSCodeからElectronをデバック実行する
メニューのデバックを選択して、ツールバーから歯車ボタンを押すとlaunch.jsが開かれます。
このファイルが、デバックの設定ファイルです。
launch.js
{
// Use IntelliSense to learn about possible Node.js debug attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "Debug Main Process",
"type": "node",
"stopOnEntry": false,
"program": "${workspaceRoot}/main.js",
"args": ["test.jpg"],
"cwd": "${workspaceRoot}",
"preLaunchTask": null,
"runtimeArgs": [],
"env": {
"NODE_ENV": "development"
},
"linux": {
"runtimeExecutable": "${env.HOME}/.nodebrew/node/v6.9.4/bin/electron"
},
"windows": {
"runtimeExecutable": "${env.APPDATA}/npm/node_modules/electron-prebuilt/dist/electron.exe"
},
"console": "integratedTerminal",
"sourceMaps": false,
"outFiles": []
}
]
}
```
Electronのライブラリをグローバルにインストールした場合の設定は、こんな感じで動くみたいです。
WindowsとLinuxの設定を共存させることもできます。