Visual Studio代碼-帶有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 Run以啟動我的客戶端和服務器項目。 您會在chrome啟動部分中看到一個preLaunchTask ，您可以在下面看到它的定義。 另外，您還將在下面看到我正在使用nodemon作為我的可執行文件。 如果您只想使用node作為可執行文件，則可以刪除它和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"
}