Question

我有一个NodeJS项目，我可以从yarn start命令的命令行开始。我的package.json看起来与此相似：

{
  "name": "projectname",
  "version": "0.0.1",
  "description": "",
  "author": "My Name",
  "license": "",
  "scripts": {
    "start": "yarn dev",
    "dev": "yarn stop && pm2 start pm2-dev.yaml && webpack-dev-server --progress",
    "prod": "yarn stop && yarn build && pm2 start pm2-prod.yaml",
    "build": "rimraf dist lib && babel src -d lib --ignore test.js && cross-env NODE_ENV=production webpack -p --progress",
    "stop": "rimraf logs/* && pm2 delete all || true"
  },
  "dependencies": {
    "body-parser": "~1.16.0",
    "ejs": "2.5.5",
    "express": "^4.14.1",
    "pg": "^6.1.2",
    "react": "^15.4.2",
    "redux": "^3.6.0",
  },
  "devDependencies": {
    "babel-cli": "^6.22.2",
    "cross-env": "^3.1.4",
    "eslint": "^3.13.0",
    "pm2": "^2.3.0",
    "redux-mock-store": "^1.2.2",
    "rimraf": "^2.5.4",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.2.1"
  }
}

我正在尝试使用Visual Studio Code在调试模式下启动此项目，但几乎没有运气。我在VS Code launch.json文件中定义了我的启动配置，如下所示：

{
  // Use IntelliSense to learn about possible Node.js debug attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "yarn",
      "runtimeExecutable": "yarn",
      "runtimeArgs": [
        "start"
      ],
      "port": 5858,
      "cwd": "${workspaceRoot}",
      "timeout": 10000
    }
  ]
}

此配置的问题在于它通常超时，因为webpack-dev-server构建时间超过10秒。我可以在我的配置中增加timeout，但我注意到VS Code最终会生成一条消息Cannot connect to runtime process (timeout after 30000 ms).，所以我认为这不是一个好的解决方案。此外，我的断点被这种配置忽略，这告诉我，我肯定在这里做错了。

这是我第一次尝试Visual Studio Code并且我通常不使用NodeJS，但是我已经定义了package.json中所有这些脚本的项目，所以我试图采用它因此关于如何正确运行它的所有困惑。

Visual Studio Code能否运行具有完全调试功能的项目，如果是这样，我应该如何配置我的启动脚本？

Answer 1

我无法具体回答问题的webpack部分。但是，由于您尚未启用调试功能，因此上述脚本无法正常工作。公开调试允许调试器附加到此过程，并且它还会阻止程序执行，直到附加调试器为止。您需要在package.json中创建另一个脚本来进行调试。然后，您可以使用特定于调试的脚本进行调试，并使用非调试脚本正常运行。例如：

<body>
<h8>
    MY BLOGS
</h8>

<ul>
    {% for bl in all_blogs %}
        <li>{{bl.header}}</li>
    {% endfor %}
</ul>

然后，在launch.json中将“ start”替换为“ dev-debug”。在launch.json和package.json中，调试端口均已设置为5858，因此应该可以使用。关键是使用--inspect-brk命令运行节点，从而迫使节点应用程序的执行停止，直到调试器连接到该应用程序为止。

Answer 2

除了above －为了使我的工作正常，我必须将以下内容添加到我的package.json中（仍然需要exec）-

"start:debug": "nodemon --inspect-brk=5858 --exec \"babel-node\" src/index.js"

Answer 3

我最终在launch.json中进行了以下配置：

{
    "type": "node",
    "request": "launch",
    "name": "Launch via Yarn",
    "runtimeExecutable": "yarn",
    "cwd": "${workspaceFolder}",
    "runtimeArgs": ["start:debug"],
    "port": 5858
}

还有scripts中package.json属性中的以下条目：

"start:debug": "node --inspect-brk=5858 ./server/index.js",

如果您的timeout中有任何prestart:debug脚本，则可以包含一个package.json键（默认为10000）并增加其值，这可能会导致延迟实际节点的启动应用程序。

Answer 4

我没有在VS Code中使用过调试，但我正在使用nodemon使用shell脚本调试Chrome。

bin_dir="$__dirname/../node_modules/.bin"
src_dir="$__dirname/../src"

"$bin_dir/nodemon" --ext js,yaml \
    --watch "$src_dir/package.json" \
    --watch "$src_dir" \
    "$src_dir/index.js" \
    --exec "yarn && babel-node --inspect=0.0.0.0:9229"

打开chrome://inspect/#devices并启动调试程序

使用yarn在Visual Studio Code中运行NodeJS项目

4 个答案: