Node.js Visual Studio代码-节点应用程序与Chrome调试器冲突_Node.js_Angular_Express_Visual Studio Code

Node.js Visual Studio代码-节点应用程序与Chrome调试器冲突

node.js angular express visual-studio-code

Node.js Visual Studio代码-节点应用程序与Chrome调试器冲突,node.js,angular,express,visual-studio-code,Node.js,Angular,Express,Visual Studio Code,目前，我的Visual Studio代码应用程序中有以下launch.json { "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "Launch Program", "program": "${workspaceRoot}\\s

目前，我的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代码以在同一端口下启动Angular 4应用程序和Node Express后端，这样我就可以用一个简单的f5调试这两个方面

有什么建议吗

以下是我的React应用程序和Express服务器的工作原理，只需点击一个选项即可启动并运行。这是我的设置：

我的

launch.json

文件，它使用

components

属性。使用此属性，我现在可以从

Run

菜单中选择

Server/Client

，以启动我的客户端和服务器项目。您将在

chrome

launch部分看到，我称之为

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

是我用来启动客户端项目的节点脚本。我的

客户端

和

服务器

文件夹在我的目录中彼此相邻，因此我必须

光盘

，然后启动我的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的

调试控制台中运行，节点应用程序在vscode内部的终端中运行。这一点很重要，因为在上面的launch.json
中，您将看到我为节点应用程序定义了这一点：“console”：“integratedTerminal”
，这确保了客户端和服务器输出不会发生冲突
 以下是我的React应用程序和Express服务器的工作原理，只需点击一个选项即可启动并运行。这是我的设置：
我的launch.json
文件，它使用components
属性。使用此属性，我现在可以从Run
菜单中选择Server/Client
，以启动我的客户端和服务器项目。您将在chrome
launch部分看到，我称之为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
是我用来启动客户端项目的节点脚本。我的客户端
和服务器
文件夹在我的目录中彼此相邻，因此我必须光盘
，然后启动我的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的调试控制台中运行，节点应用程序在vscode内部的终端中运行。这一点很重要，因为在上面的launch.json
中，您将看到我为节点应用程序定义了这一点：“console”：“integratedTerminal”
，这确保了客户端和服务器输出不会发生冲突
 在节点配置中，指定“cwd”
键：
{
    "type": "node",
    "request": "launch",
    "name": "Launch Program",
    "program": "${workspaceRoot}\\server\\server.js",
    "cwd": "${workspaceFolder}\\server"
}

在节点配置中，指定“cwd”
键：
{
    "type": "node",
    "request": "launch",
    "name": "Launch Program",
    "program": "${workspaceRoot}\\server\\server.js",
    "cwd": "${workspaceFolder}\\server"
}