Visual Studio Code - 与 Chrome 调试器冲突的节点应用程序

Question

我目前在我的 Visual Studio Code 应用程序中有以下 launch.json。

{
    "version": "0.2.0",
    "configurations": [        
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceRoot}\\server\\server.js"
        },
        {
            "name": "Launch Chrome against localhost, with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4200/",
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}",
            "sourceMapPathOverrides": {
                "webpack:///*": "/*"
            }
        },
        {
            "name": "Attach to Chrome, with sourcemaps",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "sourceMaps": true,
            /*"diagnosticLogging": true,*/
            "webRoot": "${workspaceRoot}",
            "url": "http://localhost:4200/*",
            "sourceMapPathOverrides": {
                "webpack:///*": "/*"
            }
        }

    ]
}

我想知道如何配置 Visual Studio Code 以在同一端口下启动我的 Angular 4 应用程序和 Node Express 后端，以便我可以使用简单的f5 调试双方。

有什么建议吗？

Answer 1

这就是我只需点击一个选项就可以让我的 React 应用程序和 Express 服务器启动并运行的方法。这是我的设置：

我的launch.json 文件使用compounds 属性。使用这个属性，我现在可以从Run 菜单中选择Server/Client 来启动我的客户端和服务器项目。您将在chrome 启动部分看到，我称之为preLaunchTask，您可以在下面看到它的定义。您还会看到我在下面使用 nodemon 作为我的可执行文件。如果您只想将节点用作可执行文件，则可以删除它和 runtimeArgs。

{
  "version": "0.2.0",
  "configurations": [

    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch_Client_App",
      "url": "http://localhost:3000/",
      "webRoot": "${workspaceRoot}/client/public/index.html",
      "preLaunchTask": "start_debugging"
    },
    {
      "name": "Launch_Server",
      "type": "node",
      "request": "launch",
      "protocol": "inspector",
      "cwd": "${workspaceRoot}",
      "runtimeExecutable": "nodemon",
      "trace": true,
      "program": "${workspaceRoot}/path/to/start_up_file.js",
      "runtimeArgs": [
        "--watch",
        "server"
      ],
      "restart": true,
      "console": "integratedTerminal"
    },
  ],

  "compounds": [
    {
        "name": "Server/Client",
        "configurations": ["Launch_Client_App", "Launch_Server"]
    }
  ]
}

tasks.json 定义了我的预启动任务，如上所示。你会在这里看到我调用了一个 bash 脚本debug.sh，你可以在下面看到它。

{
  "version": "2.0.0",
  "tasks": [    
      {
        "label": "start_debugging",
        "type": "shell",
        "command": "./debug.sh",
        "windows": {
            "command": ".\\debug.cmd"
        },
        "isBackground": true,
        "group": {
            "kind": "test",
            "isDefault": true
        },
        "problemMatcher": {
            "owner": "custom",                      //This is not needed but, required by the problemMatcher Object
            "pattern": {
                "regexp": "^$"                      //This is not needed but, required by the problemMatcher Object
            },
            "background": {
                "activeOnStart": true,
                "beginsPattern": "Compiling...",    //Signals the begin of the Task
                "endsPattern": "Compiled .*"        //Signals that now the initialisation of the task is complete
            }
        },
        "presentation": {
            "reveal": "always",
            "panel": "new"
        }
    }
  ]
}

debug.sh 是一个 Node 脚本，我调用它来启动我的客户端项目。我有我的 client 和 server 文件夹，在我的目录中彼此相邻，所以我必须 cd 然后启动我的 React 应用程序。

node start-client.js

然后start-client.js 看起来像：

const args = [ 'start' ];
const opts = { stdio: 'inherit', cwd: 'client', shell: true };
require('child_process').spawn('npm', args, opts);

就是这样！我的客户端应用程序在 vscode 的 Debug Console 中运行，而 Node 应用程序在 vscode 内部的 Terminal 中运行。这很重要，因为在上面的 launch.json 中，您会看到我为 Node 应用程序定义了这个："console": "integratedTerminal"，它确保客户端和服务器输出不会发生冲突。

Answer 2

在您的节点配置中，指定"cwd" 键：

{
    "type": "node",
    "request": "launch",
    "name": "Launch Program",
    "program": "${workspaceRoot}\\server\\server.js",
    "cwd": "${workspaceFolder}\\server"
}