es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Iniciar el servidor y el cliente simultáneamente con la capacidad de utilizar puntos de interrupción – utilizando el depurador de VS Code.

Iniciar el servidor y el cliente simultáneamente con la capacidad de utilizar puntos de interrupción – utilizando el depurador de VS Code.

23 Jul, 2023 Programación

Estoy trabajando en una aplicación de Crear-React-App donde he configurado el archivo .launch.json para tener 2 configuraciones.

  1. Iniciar mediante NPM – para iniciar el servidor mediante npm start
  2. Iniciar Chrome – para abrir el cliente y depurar mi aplicación web con puntos de interrupción

Actualmente solo puedo elegir una opción del menú desplegable. Así que ejecuto manualmente npm start en la terminal y luego uso el depurador para iniciar Chrome, lo cual me permite usar puntos de interrupción.

Pero me gustaría saber cómo iniciar estas 2 configuraciones simultáneamente usando el depurador de VS Code. ¿Es posible?

A continuación se muestra la configuración que tengo en launch.json:

json
"version": "0.2.0",
"configurations": [
{
// Esto no se detiene en los puntos de interrupción
"name": "Iniciar mediante NPM",
"request": "launch",
"runtimeArgs": ["run-script", "start"],
"runtimeExecutable": "npm",
"skipFiles": ["<node_internals>/**"],
"cwd": "${workspaceFolder}",
"type": "pwa-node"
},
{
"name": "Iniciar Chrome",
"request": "launch",
"type": "pwa-chrome",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
}
]
}

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para lanzar estas dos configuraciones simultáneamente utilizando el depurador de VS Code, puede crear una configuración compuesta en el archivo launch.json.

    Aquí hay un ejemplo de una configuración compuesta que lanza ambas configuraciones:

    {
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Lanzar via NPM",
      "request": "launch",
      "runtimeArgs": ["run-script", "start"],
      "runtimeExecutable": "npm",
      "skipFiles": ["<node_internals>/**"],
      "cwd": "${workspaceFolder}",
      "type": "pwa-node"
    },
    {
      "name": "Lanzar Chrome",
      "request": "launch",
      "type": "pwa-chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "Lanzar NPM y Chrome",
      "type": "compound",
      "preLaunchTask": "npm-start",
      "configurations": ["Lanzar Chrome", "Lanzar via NPM"]
    }
  ],
  "tasks": [
    {
      "type": "npm",
      "script": "start",
      "isBackground": true,
      "problemMatcher": {
        "owner": "javascript",
        "fileLocation": ["relative", "${workspaceFolder}"],
        "pattern": {
          "regexp": "^((?!.*\\bwebpack\\b)(?!.*\\bHMR\\b)(?!.*\\bless\\b).)*$",
          "message": 1
        },
        "background": {
          "activeOnStart": true,
          "beginsPattern": "Starting development server",
          "endsPattern": "Compiled successfully"
        }
      },
      "presentation": {
        "echo": true,
        "reveal": "silent",
        "focus": false,
        "panel": "shared",
        "clear": false
      },
      "problemMatcher": {
        "owner": "javascript",
        "fileLocation": ["relative", "${workspaceFolder}"],
        "pattern": {
          "regexp": "^\\s+at (([^\\(\\)]+ \\()?(?:[^\\[\\]]+\\[as [^\\]]+\\]|([^\\[\\]]+))(\\))?( \\[as [^\\]]+\\])?): (.*)$",
          "file": 1,
          "line": 2,
          "column": 3,
          "message": 6
        }
      },
      "group": {
        "kind": "build",
        "isDefault": true
      }
    }
  ]
}

    En este ejemplo, hay una nueva configuración llamada Lanzar NPM y Chrome que tiene un type de compound. También tiene una preLaunchTask con el valor npm-start, que ejecuta el comando npm start antes de lanzar las dos configuraciones.

    Para crear una nueva configuración compuesta:

    1. Dentro del array configurations, cree un nuevo objeto con un name y type de compound.
    2. Agregue una propiedad preLaunchTask con el nombre de la tarea que desea ejecutar antes de lanzar las configuraciones.
    3. Agregue una propiedad configurations con una matriz de las configuraciones que desea lanzar.

    Una vez que haya creado la configuración compuesta, selecciónela del menú desplegable de configuraciones de lanzamiento para lanzar ambas configuraciones simultáneamente.

    Nota: En el ejemplo anterior, también hay una matriz tasks que incluye una tarea para ejecutar npm start. Esta tarea se utiliza como preLaunchTask en la configuración Lanzar NPM y Chrome. La tarea se utiliza para iniciar automáticamente el servidor antes de lanzar el cliente en el navegador.

Comments are closed.