如何从Visual Studio Code中使用Electron和Angular调试应用程序？

Question

我正在尝试使用最新版本的Angular和Electron开发一个非常简单的应用程序。为此，我遵循了Angular和Electron的教程。经过大量的反复试验，终于可以启动我的应用程序（GitHub上的源代码）。
我使用Visual Studio代码，并且在TypeScript代码中设置断点时，在调试Electron应用程序时永远不会碰到断点。为此，我进行了launch.json如下配置：

{
    "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"
        }
    ]
}

我的tasks.json样子是这样的：

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

该build命令的脚本npm run build在my中定义，package.json并且仅调用ng build。因此，在开始调试后，输出将内置到dist文件夹中，然后从那里启动我的Electron应用程序。
在该dist文件夹中，还有一些*.js.map文件，据我所知，这些文件应充当TypeScript文件的桥梁，对吗？

有什么提示为什么我的断点不起作用？

Answer 1

使用 --remote-debug-port 选项启动电子应用程序。例如使用 9222 作为调试端口：

electron . --remote-debugging-port=9222

然后像这样配置 launch.json ：

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