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

Posted 2023-03-22

【中文标题】如何使用 Visual Studio Code 中的 Electron 和 Angular 调试应用程序？

【英文标题】：How to debug an app with Electron and Angular from Visual Studio Code?

【发布时间】：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。

不，很遗憾没有:(

【参考方案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"
        
    ]