メインコンテンツへ飛ぶ

VS Code でデバッグする

This guide goes over how to set up VSCode debugging for both your own Electron project as well as the native Electron codebase.

Electron アプリをデバッグする​

メインプロセス​

1. VS Code で Electron プロジェクトを開く​

$ npx create-electron-app@latest my-app
$ code my-app

2. 以下の構成の .vscode/launch.json ファイルを追加する​

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Main Process",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceFolder}",
      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
      "windows": {
        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
      },
      "args" : ["."],
      "outputCapture": "std"
    }
  ]
}

3. デバッグする​

Set some breakpoints in main.js, and start debugging in the Debug View. You should be able to hit the breakpoints.

Electron コードベースをデバッグする​

If you want to build Electron from source and modify the native Electron codebase, this section will help you in testing your modifications.

For those unsure where to acquire this code or how to build it, Electron's Build Tools automates and explains most of this process. If you wish to manually set up the environment, you can instead use these build instructions.

Windows (C++)​

1. VS Code で Electron プロジェクトを開く​

$ npx create-electron-app@latest my-app
$ code my-app

2. 以下の構成の .vscode/launch.json ファイルを追加する​

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "(Windows) Launch",
      "type": "cppvsdbg",
      "request": "launch",
      "program": "${workspaceFolder}\\out\\your-executable-location\\electron.exe",
      "args": ["your-electron-project-path"],
      "stopAtEntry": false,
      "cwd": "${workspaceFolder}",
      "environment": [
          {"name": "ELECTRON_ENABLE_LOGGING", "value": "true"},
          {"name": "ELECTRON_ENABLE_STACK_DUMPING", "value": "true"},
          {"name": "ELECTRON_RUN_AS_NODE", "value": ""},
      ],
      "externalConsole": false,
      "sourceFileMap": {
          "o:\\": "${workspaceFolder}",
      },
    },
  ]
}

設定メモ

  • cppvsdbg requires the built-in C/C++ extension be enabled.
  • ${workspaceFolder} Chromium の src ディレクトリのフルパスです。
  • your-executable-location はいくつかの項目に応じて以下のいずれかになります。
    • Testing: If you are using the default settings of Electron's Build-Tools or the default instructions when building from source.
    • Release: Testing ビルドではなく Release ビルドで構築した場合。
    • your-directory-name: If you modified this during your build process from the default, this will be whatever you specified.
  • The args array string "your-electron-project-path" should be the absolute path to either the directory or main.js file of the Electron project you are using for testing. In this example, it should be your path to my-app.

3. デバッグする​

Set some breakpoints in the .cc files of your choosing in the native Electron C++ code, and start debugging in the Debug View.