VS Code launch.json来运行和调试MERN应用程序

Question

我正试图在VS Code上设置调试环境，以运行和调试MERN应用程序。

我现在有这个launch.json:

{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Node: Nodemon",
"runtimeExecutable": "yarn",
"runtimeArgs": [
"dev"
],
"outputCapture": "std",
},
]
}

它运行得很好，但有了它，我只能在后端有断点，而不能在前端的React应用程序中有断点。

脚本yarn dev(后端的package.json(使用concurrently:同时运行后端和前端

以下是我在后台package.json中的脚本：

"scripts": {
"start": "node backend/server.js",
"server": "nodemon backend/server.js",
"client": "yarn --cwd frontend/ start",
"dev": "concurrently "yarn server" "yarn client""
}

什么是一个工作的launch.json，可以让我在前端也有断点？

Answer 1

实现这一点的一种方法是使用VS Code的多目标调试：https://code.visualstudio.com/docs/editor/debugging#_multitarget-调试

"；使用多目标调试很简单：在启动第一个调试会话后，您可以启动另一个会话。一旦第二个会话启动并运行，VS代码UI就切换到多目标模式">

如果您更喜欢使用launch.json，您可以创建一个复合启动配置，如下所示：

{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Node: Nodemon",
"runtimeExecutable": "yarn",
"runtimeArgs": [
"dev"
],
"outputCapture": "std",
},
{
"type": "node",
"request": "launch",
"name": "Client",
"program": "${workspaceFolder}/client.js"
}
],
"compounds": [
{
"name": "Server/Client",
"configurations": [
"Node: Nodemon",
"Client"
],
"preLaunchTask": "${defaultBuildTask}",
"stopAll": true
}
]
}

配置将并行启动。