Vue-cli-plugin-electron-builder: vscode debug support

[ueqt]

Is your feature request related to a problem? Please describe.
Could you add .vscode/launch.json to support vscode support?

Describe the solution you'd like
We need debug both main process and renderer process as follows:

1. debug main process like src/background.ts

2. debug renderer process (vue project) in electron use Debugger for Chrome extension

[TotomInc]

There is already some documentation on VSCode debugging the background file (both js and ts), which redirects to an Electron tutorial about debugging your apps.

Take a look at the _external debuggers_ section, which explains how to debug the main process with VSCode.

You can also look at vscode-recipes repo which explains how to debug an Electron app (both main and renderer).

[ueqt]

Hi @TotomInc , I've tried that, when I use vscode-recipes repo, it works, but when I use vue-cli-plugin-electron-builder, it can't hit breakpoint.

My project is TypeScript.
My step is run vue-cli-service serve:electron --debug in terminal first, and then use configuration as follows:

{
      "type": "node",
      "request": "launch",
      "name": "Debug Main Process",
      "cwd": "${workspaceFolder}/src",
      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
      "windows": {
        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
      },
      "runtimeArgs": [
        "--no-lazy",
        "--enable-logging",
      ],
      "program": "${workspaceFolder}/dist_electron/index.js",
      "protocol": "inspector",
      "sourceMaps": true,
      "console": "integratedTerminal",
    },
{
      "name": "Debug Renderer Process with npm run serve:electron:debug",
      "type": "chrome",
      "request": "launch",
      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
      "windows": {
        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
      },
      "runtimeArgs": [
        "${workspaceFolder}/dist_electron/index.js",
        "--enable-logging",
        "--remote-debugging-port=9222"
      ],
      "webRoot": "${workspaceFolder}/src",
      "sourceMaps": true,
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
        "webpack:///./*": "${webRoot}/*",
        "webpack:///src/*": "${webRoot}/*",
        "webpack:///*": "*",
        "webpack:///./~/*": "${webRoot}/node_modules/*",
        "meteor://💻app/*": "${webRoot}/*"
      },
    },

[TotomInc]

Looks like it is broken indeed when it comes to TypeScript. I always get _unverified breakpoints_ during runtime with the following config:

{
  "version": "0.2.0",
  "configurations": [{
    "name": "Electron: main",
    "type": "node",
    "request": "launch",
    "program": "${workspaceRoot}/dist_electron/background.js",
    "cwd": "${workspaceRoot}",
    "args": ["./dist_electron/background.js"],
    "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
    "sourceMaps": true
  }]
}

and when running yarn serve:electron --debug.

It looks like it is an issue and not a feature request since it is supposed to work with typescript.

[TotomInc]

Could you also specify what OS, node, npm/yarn and typescript version you are using @ueqt?

• OS: Mac OS X 10.13.6
• Node: v10.8.0
• npm: 6.2.0
• yarn: 1.9.4
• typescript: ^3.0.0

[ueqt]

• OS: Mac OS X 10.13.6
• Node: v8.11.2
• npm: 6.4.1
• typescript: ^3.0.3

[nklayman]

Due to crazy source map issues, you can't use red dot breakpoints. You have to use debugger statements. These should work fine.

[nklayman]

@TotomInc @ueqt could you guys try debugger statements and see if those work for you. If so, I will close this issue.

[ueqt]

for Main Process, debugger works, but for Renderer Process, debugger still can not hit, only devtools work.

[nklayman]

I found out why it is broken. Electron uses an earlier version of chrome, one that doesn't support multiple debuggers. Chrome devtools terminates the vscode debug session when devtools are open. I believe electron 3.0.0 upgrades to a version of chrome that supports multiple debuggers. To fix this with 2.x.x, comment out the if (!process.env.IS_TEST) window.webContents.openDevTools() inside of background.js, and use the following config:

{
      "type": "chrome",
      "request": "launch",
      "name": "vuejs: electron",
      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
      "windows": {
        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
      },
      "runtimeArgs": ["${workspaceFolder}/dist_electron/index.js"],
      "webRoot": "${workspaceFolder}/src",
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }

You still can't use red dot breakpoints, but debugger works fine.
I'm going to close this as it is not this plugin's fault.

[RacerDelux]

Does this still work? Having trouble getting it set up.
If so, would somebody mind posting their config?

[thoni56]

.vscode/launch.json:

{
  // Use IntelliSense to learn about possible 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": "Electron: Main",
      "type": "node",
      "request": "launch",
      "protocol": "inspector",
      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
      "windows": {
        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
      },
      "preLaunchTask": "electron-debug",
      "args": [
        "--remote-debugging-port=9223",
        "./dist_electron"
      ],
      "outFiles": [
        "${workspaceFolder}/dist_electron/**/*.js"
      ]
    },
    {
      "name": "Electron: Renderer",
      "type": "chrome",
      "request": "attach",
      "port": 9223,
      "urlFilter": "http://localhost:*",
      "timeout": 30000,
      "webRoot": "${workspaceFolder}",
      "sourceMapPathOverrides": {
        "webpack:///./*": "${webRoot}/*"
      }
    }
  ],
  "compounds": [
    {
      "name": "Electron: All",
      "configurations": [
        "Electron: Main",
        "Electron: Renderer"
      ]
    }
  ]
}

.vscode/tasks.json:
` { // See https://go.microsoft.com/fwlink/?LinkId=733558 // for the documentation about the tasks.json format "version": "2.0.0", "tasks": [ { "label": "electron-debug", "type": "process", "command": "./node_modules/.bin/vue-cli-service", "windows": { "command": "./node_modules/.bin/vue-cli-service.cmd" }, "isBackground": true, "args": [ "electron:serve", "--debug" ], "problemMatcher": { "owner": "custom", "pattern": { "regexp": "" }, "background": { "beginsPattern": "Starting development server\\.\\.\\.", "endsPattern": "Not launching electron as debug argument was passed\\." } } } ] }

[bromix]

.vscode/launch.json:

{
  // Use IntelliSense to learn about possible 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": "Electron: Main",
      "type": "node",
      "request": "launch",
      "protocol": "inspector",
      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
      "windows": {
        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
      },
      "preLaunchTask": "electron-debug",
      "args": [
        "--remote-debugging-port=9223",
        "./dist_electron"
      ],
      "outFiles": [
        "${workspaceFolder}/dist_electron/**/*.js"
      ]
    },
    {
      "name": "Electron: Renderer",
      "type": "chrome",
      "request": "attach",
      "port": 9223,
      "urlFilter": "http://localhost:*",
      "timeout": 30000,
      "webRoot": "${workspaceFolder}",
      "sourceMapPathOverrides": {
        "webpack:///./*": "${webRoot}/*"
      }
    }
  ],
  "compounds": [
    {
      "name": "Electron: All",
      "configurations": [
        "Electron: Main",
        "Electron: Renderer"
      ]
    }
  ]
}

.vscode/tasks.json:

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "electron-debug",
            "type": "process",
            "command": "./node_modules/.bin/vue-cli-service",
            "windows": {
                "command": "./node_modules/.bin/vue-cli-service.cmd"
            },
            "isBackground": true,
            "args": [
                "electron:serve",
                "--debug"
            ],
            "problemMatcher": {
                "owner": "custom",
                "pattern": {
                    "regexp": ""
                },
                "background": {
                    "beginsPattern": "Starting development server\\.\\.\\.",
                    "endsPattern": "Not launching electron as debug argument was passed\\."
                }
            }
        }
    ]
}

```

Nice one...thanks for the help. Why isn't this a debug extension for vscode :D ?

[ajmasia]

Hi guys, I'm trying to debug with that configuration and don't work!
I get this message: Cannot connect to runtime process, timeout after 30000 ms - (reason: Cannot connect to the target: connect ECONNREFUSED 127.0.0.1:9223)

And from console Not launching electron as debug argument was passed. You must launch electron through your debugger

Any idea?