12
15

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

VSCodeで、Electronをデバックする

Last updated at Posted at 2017-01-22

#デバックツールの起動
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;
  });
});

Screenshot from 2017-01-22 22-18-36.png
#VSCodeからElectronをデバック実行する
メニューのデバックを選択して、ツールバーから歯車ボタンを押すとlaunch.jsが開かれます。
このファイルが、デバックの設定ファイルです。
Screenshot from 2017-01-22 22-39-40.png

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の設定を共存させることもできます。
12
15
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12
15

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?