调试时 Visual Studio Code 不是 npm 启动我的 React JS 应用程序

Question

我想在 Visual Studio Code 上调试 React JS 应用程序，所以我正在遵循本教程： https: //code.visualstudio.com/docs/nodejs/reactjs-tutorial

我被困在：

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

正在打开一个新的 Chrome 实例，请求“ http://localhost:3000 ”，但我的应用程序并未真正运行，它似乎只是运行了调试器。

如果我手动npm start运行我的应用程序。所以我猜想launch.jsonVisual Studio Code 缺少一些东西来使用调试器启动应用程序。这就是为什么我坚持确保我的开发服务器正在运行该命令，因为我不知道我到底在哪里检查这个

这是我的 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"
  }
}

Answer 1

您可以preLaunchTask在launch.json中设置自动运行npm start。

\n\n

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

\n\n

任务.json

\n\n

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

\n\n

启动.json

\n\n

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

\n\n

按F5启动调试器，npm start将被执行。

\n