angular - 如何从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在我的 package.json中定义，并且仅调用 ng build。因此，在开始调试后，输出将内置到 dist文件夹中，然后从此处启动我的Electron应用程序。
在 dist文件夹中，还有一些 *.js.map文件，据我所知，这些文件应充当TypeScript文件的桥梁，对吗？

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

Answer 1

使用--remote-debug-port选项启动 Electron 应用程序。例如使用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}"
        }
    ]
}