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

Question

我正在尝试使用最新版本的 Angular 和 Electron 开发一个非常简单的应用程序。为此，我遵循了 Angular 和 Electron 的教程。经过反复试验，终于可以开始我的应用程序了(GitHub 上的源代码)。
我使用 Visual Studio Code，在我的 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"
        }
    ]
}

命令 npm run build 的脚本 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}"
        }
    ]
}