CODEWITHSUNDEEP
angularvisual-studio-codeelectron
mu88
mu88

Reputation: 5434

How to debug an app with Electron and Angular from Visual Studio Code?

I'm trying to develop a very simple app using the latest versions of Angular and Electron. For this, I followed the tutorials of Angular and Electron. After a lot of trial and error, finally I can start my application (source code on GitHub).
I use Visual Studio Code and when setting a breakpoint in my TypeScript code, it never get's hit when debugging my Electron application. For this, I've configured launch.json as follows:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceFolder}\\main.js",
            "cwd": "${workspaceRoot}",
            "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
            "runtimeArgs": [
                ".",
                "--enable-logging"
            ],
            "outFiles": [
                "${workspaceFolder}/dist/**/*.js"
            ],
            "preLaunchTask": "build"
        }
    ]
}

My tasks.json looks like this:

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "build",
            "command": "npm run build",
            "type": "shell",
            "problemMatcher": "$tsc"
        }
    ]
}

The script build for the command npm run build is defined in my package.json and simply calls ng build. So after starting debugging, the output will be built into the dist folder and from there I start my Electron app.
Within the dist folder, there are also some *.js.map files, which (as far as I understood) should be responsible of acting as a bridge to the TypeScript files, right?

Any hints why my breakpoints are not working?

Upvotes: 7

Views: 5381

Answers (1)

Hao
Hao

Reputation: 71

Start the electron app using --remote-debug-port option. e.g. using 9222 as debug port:

electron . --remote-debugging-port=9222

Then configure launch.json like that:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:9222",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

Upvotes: 4

Related Questions