如何从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代码，并且在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看起来像这样:

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "build",
            "command": "npm run build",
            "type": "shell",
            "problemMatcher": "$tsc"
        }
    ]
}

在我的package.json中定义了命令npm run build的脚本build，只需调用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屋！