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

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

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

1 个答案: