Visual Studio代碼 - 使用Chrome調試器衝突的應用程序

Question

我目前在我的Visual Studio代碼應用程序中有以下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代碼同一端口下啓動這兩個我角4的應用程序和節點快速後端，這樣我可以用一個簡單的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是節點的腳本我叫，開始了我的客戶端項目。我有我的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"，它確保客戶端和服務器輸出不會發生衝突。