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

【问题标题】：How to debug an app with Electron and Angular from Visual Studio Code?如何使用 Visual Studio Code 中的 Electron 和 Angular 调试应用程序？
【发布时间】：2018-09-08 10:31:20
【问题描述】：

我正在尝试使用最新版本的 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 文件的桥梁，对吧？

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

【问题讨论】：

这里是提供所有详细信息的链接：tutorialspoint.com/electron/electron_debugging.htm
可以调试 JavaScript 代码，但不能调试 TypeScript 代码。
您解决了吗？有类似的问题说即使地图在那里也找不到我的 JavaScript。
不，很遗憾没有:(

标签： angular visual-studio-code electron

【解决方案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}"
        }
    ]
}

【讨论】：