Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

vscode debug support

See original GitHub issue

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:

debug main process like src/background.ts
debug renderer process (vue project) in electron use Debugger for Chrome extension

Issue Analytics

State:
Created 5 years ago
Comments:16 (3 by maintainers)

Top GitHub Comments

11reactions

thoni56commented, Jan 8, 2020

.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\\."
                }
            }
        }
    ]
}
```

1reaction

ajmasiacommented, May 7, 2020

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?

Top Results From Across the Web

Debugging in Visual Studio Code

VS Code has built-in debugging support for the Node.js runtime and can debug JavaScript, TypeScript, or any other language that gets transpiled to...

Introduction to Debugging in Visual Studio Code

In this tutorial, we will show you how to run and debug a program in VS Code. We'll take a tour of the...

Debugger Extension - Visual Studio Code

List of languages supported by the debugger. VS Code enables the UI to set breakpoints for those languages. mention- JSON schema for the...

Debug Node.js Apps using Visual Studio Code

The JavaScript debugger of VS Code supports source maps that help debugging of transpiled languages, for example, TypeScript or minified/uglified JavaScript.

Debug Browser Apps using Visual Studio Code

The Visual Studio Code editor includes browser debugging support. Set breakpoints, step-in, inspect variables and more.