Reactjs Visual Studio代码未在调试时启动我的React JS应用程序

我想在Visual Studio代码上调试React JS应用程序，因此我将遵循本教程：

我被困在：

确保开发服务器正在运行（“npm启动”）。然后 按F5或绿色箭头启动调试器并打开一个新窗口 浏览器实例

正在打开一个新的Chrome实例请求“”，但我的应用程序没有真正运行，它似乎只是运行了调试器

如果我手动

npm启动

我的应用程序，它会运行。因此，我猜

launch.json

缺少VisualStudio代码使用调试器启动应用程序的内容。这就是为什么我必须确保我的开发服务器正在运行这个命令，因为我不知道我到底在哪里检查这个命令

这是我的launch.json：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceRoot}"
        },
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to Chrome",
            "port": 9222,
            "webRoot": "${workspaceRoot}"
        }
    ]
}

这是我的package.json：

{
  "name": "tic-tac-toe",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-scripts": "1.0.11"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

---

我不确定这是否可能。本教程明确指出，您应该确保开发服务器已经运行。因此，您必须首先运行

npm start

，然后进行调试。

您可以在launch.json中设置

preLaunchTask

，以自动运行

npm start

在.vscode文件夹中创建tasks.json

tasks.json

{
    "version": "2.0.0",
    "tasks": [
        {
            "type": "npm",
            "script": "start",
            "group": {
                "kind": "test",
                "isDefault": true
            },
            "isBackground": true,
            "problemMatcher": {
                "owner": "custom",
                "pattern": {
                    "regexp": "ˆ$"
                },
                "background": {
                    "activeOnStart": true,
                    "beginsPattern": "Compiling...",
                    "endsPattern": "Compiled .*"
                }
            }
        }
    ]
}

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Chrome",
      "type": "chrome",
      "preLaunchTask": "npm: start",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src",
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}

launch.json

{
    "version": "2.0.0",
    "tasks": [
        {
            "type": "npm",
            "script": "start",
            "group": {
                "kind": "test",
                "isDefault": true
            },
            "isBackground": true,
            "problemMatcher": {
                "owner": "custom",
                "pattern": {
                    "regexp": "ˆ$"
                },
                "background": {
                    "activeOnStart": true,
                    "beginsPattern": "Compiling...",
                    "endsPattern": "Compiled .*"
                }
            }
        }
    ]
}

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Chrome",
      "type": "chrome",
      "preLaunchTask": "npm: start",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src",
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}

---

按F5启动调试器，

npm start

将被执行。

不鼓励只使用代码的答案，请添加一些上下文来解释此答案如何解决问题。很好。将所选答案切换到这个答案，因为这正是我当时需要的