如何使用 Visual Studio Code 中的 Electron 和 Angular 调试应用程序? [英] How to debug an app with Electron and Angular from Visual Studio Code?

问题描述

我正在尝试使用最新版本的 Angular 和 Electron 开发一个非常简单的应用程序.为此，我遵循了 Angular 和 Electron 的教程.经过大量的试验和错误，我终于可以启动我的应用程序(GitHub上的源代码).
我使用 Visual Studio Code，并且在我的 TypeScript 代码中设置断点时，在调试我的 Electron 应用程序时它永远不会被命中.为此，我将 launch.json 配置如下:

I'm trying to develop a very simple app using the latest versions of Angular and Electron. For this, I followed the tutorials of Angular and Electron. After a lot of trial and error, finally I can start my application (source code on GitHub).
I use Visual Studio Code and when setting a breakpoint in my TypeScript code, it never get's hit when debugging my Electron application. For this, I've configured launch.json as follows:

{
    "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 看起来像这样:

My tasks.json looks like this:

{
    "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 文件的桥梁对吧?

The script build for the command npm run build is defined in my package.json and simply calls ng build. So after starting debugging, the output will be built into the dist folder and from there I start my Electron app.
Within the dist folder, there are also some *.js.map files, which (as far as I understood) should be responsible of acting as a bridge to the TypeScript files, right?

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

Any hints why my breakpoints are not working?

推荐答案

使用 --remote-debug-port 选项启动电子应用程序.例如使用 9222 作为调试端口:

Start the electron app using --remote-debug-port option. e.g. using 9222 as debug port:

electron . --remote-debugging-port=9222

然后像这样配置launch.json:

Then configure launch.json like that:

{
    "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 调试应用程序?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！