typescript 使用 vscode 调试 nest.js 应用程序

Question

提问by kentor

I am testing the nest.js framework but I am struggling to run it with VSCode so that I can properly debug my code. This is pretty much the same issue as described here Running nest.js from VS Code. However I made sure I am using the latest packages. I always get this error:

我正在测试 nest.js 框架，但我正在努力使用 VSCode 运行它，以便我可以正确调试我的代码。这与从 VS Code 运行 nest.js 中描述的问题几乎相同。但是我确保我使用的是最新的软件包。我总是收到这个错误：

Error: Cannot find module 'cats/cats.module'
    at Function.Module._resolveFilename (module.js:485:15)
    at Function.Module._load (module.js:437:25)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (c:\Users\user\Documents\random-api\dist\app.module.js:11:26)
    at Module._compile (module.js:569:30)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)

npm run startworks completely perfect, but I want to debug the application with the VSCode IDE.

npm run start工作完全完美，但我想用 VSCode IDE 调试应用程序。

My package.json dependencies:

我的 package.json 依赖项：

  "dependencies": {
    "@nestjs/common": "^4.6.6",
    "@nestjs/core": "^4.6.6",
    "@nestjs/microservices": "^4.6.6",
    "@nestjs/testing": "^4.6.6",
    "@nestjs/websockets": "^4.6.6",
    "reflect-metadata": "^0.1.12",
    "rxjs": "^5.5.7",
    "typescript": "^2.7.2"
  },
  "devDependencies": {
    "@types/express": "^4.11.1",
    "@types/jest": "^22.2.2",
    "@types/node": "^9.6.0",
    "@types/supertest": "^2.0.4",
    "jest": "^22.4.3",
    "nodemon": "^1.17.2",
    "prettier": "^1.11.1",
    "supertest": "^3.0.0",
    "ts-jest": "^22.4.2",
    "ts-node": "^5.0.1",
    "tsconfig-paths": "^3.1.3",
    "tslint": "5.9.1",
    "tslint-microsoft-contrib": "^5.0.3"
  },

My vscode's launch.json:

我的 vscode 的 launch.json：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceFolder}\dist\main.js",
            "smartStep": true,
            "outFiles": [
                "${workspaceFolder}/dist/**/*.js"
            ]
        }
    ]
}

I tried the same launch.json with the typescript file as path, but that threw the same exception:

我用打字稿文件作为路径尝试了相同的launch.json，但是抛出了相同的异常：

"program": "${workspaceFolder}\src\main.ts",

Answer 1

回答by Daniel Schmitz

Try this launch.json:

试试这个launch.json：

{
    // Use IntelliSense to learn about possible 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": "Debug Nest Framework",
            "args": ["${workspaceFolder}/src/main.ts"],
            "runtimeArgs": ["--nolazy", "-r", "ts-node/register"],
            "sourceMaps": true,
            "cwd": "${workspaceRoot}",
            "protocol": "inspector"
        }
    ]
}

Answer 2

回答by ghiscoding

I tried the accepted answer and all the other variances and none worked for me, however what really works for me is to attach to the 9229 port. What I did is add/modify your launch.jsonwith the following config

我尝试了接受的答案和所有其他差异，但没有一个对我有用，但是真正对我有用的是连接到 9229 端口。我所做的是launch.json使用以下配置添加/修改您的

.vscode/launch.json

{
  // Use IntelliSense to learn about possible 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": "attach",
      "name": "Attach NestJS WS",
      "port": 9229,
      "restart": true,
      "stopOnEntry": false,
      "protocol": "inspector"
    }
  ]
}

and in package.json(Nest new CLI commands, requires 6.8.x, see this blog)

并在package.json（嵌套新的 CLI 命令，需要6.8.x，请参阅此博客）

{
  "name": "nest-app",
  "scripts": {
    "start:debug": "nest start --debug --watch"
  }
}

and finally it works!

终于成功了！

Answer 3

回答by Sandeep K Nair

Here is a config that works. Hope this helps someone :)

这是一个有效的配置。希望这对某人有所帮助:)

Make sure you add tsconfig-paths/registerline under runtimeArgselse you will get an error saying some of your user defined modules were not found.

确保在下面添加tsconfig-paths/register一行，runtimeArgs否则您将收到一条错误消息，指出未找到某些用户定义的模块。

Also replace <YOUR_APP_ROOT_FOLDER>name with your application folder name if you have one under your root project folder, else remove it from the path in the script.

<YOUR_APP_ROOT_FOLDER>如果您的根项目文件夹下有应用程序文件夹名称，也将name替换为您的应用程序文件夹名称，否则将其从脚本中的路径中删除。

Note:Make sure to stop running your app before executing this debug config on vscode, because this debug script will launch a new instance of your app on the same port.

注意：在 vscode 上执行此调试配置之前，请确保停止运行您的应用程序，因为此调试脚本将在同一端口上启动您的应用程序的新实例。

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Debug Nest Framework",
            "args": [
                "${workspaceFolder}/<YOUR_APP_ROOT_FOLDER>/src/main.ts"
            ],
            "runtimeArgs": [
                "--nolazy",
                "-r",
                "ts-node/register",
                "-r",
                "tsconfig-paths/register"
            ],
            "sourceMaps": true,
            "cwd": "${workspaceRoot}/<YOUR_APP_ROOT_FOLDER>",
            "protocol": "inspector"
        }
    ]
}

Answer 4

回答by Nelson Bwogora

in launch.json have

在launch.json有

{
// Use IntelliSense to learn about possible 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": "Debug Nest Framework",
        "args": ["${workspaceFolder}/src/main.ts"],
        "runtimeArgs": ["--nolazy", "-r", "ts-node/register"],
        "sourceMaps": true,
        "cwd": "${workspaceRoot}",
        "protocol": "inspector"
    }
   ]
  }

Answer 5

回答by Priyabrata Pati

What I did was auto attach the vs code debugging process with one of my scripts in package.json. And on top of it I used nodemon, which would automatically restart up along with the debugger, if you have made any changes in development.

我所做的是使用 package.json 中的一个脚本自动附加 vs 代码调试过程。最重要的是，我使用了 nodemon，如果您在开发中进行了任何更改，它会与调试器一起自动重新启动。

The process requires you to install nodemon globally and add a nodemon-debug.json file in the root of the folder, which looks like this.

该过程需要你全局安装nodemon，并在文件夹的根目录添加一个nodemon-debug.json文件，如下所示。

nodemon-debug.json

{
    "watch": ["src"],
    "ext": "ts",
    "ignore": ["src/**/*.spec.ts"],
    "exec": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register src/main.ts"
}

Then in the package.json, add a script that looks like this

然后在 package.json 中，添加一个看起来像这样的脚本

"debug": "nodemon --config nodemon-debug.json"

Then in the VS Code, hit F1> search for Debug: Toggle Auto Attach. Hit on it to enable it.

然后在 VS Code 中，点击F1> 搜索Debug: Toggle Auto Attach。点击它以启用它。

Then start up the debugging process by running the following command -

然后通过运行以下命令启动调试过程 -

npm run debug

The debugger automatically turns on.

调试器自动打开。

The advantage of this process is nodemon, which automatically starts along with the debugger every time you make some changes in the code and need it up.

这个过程的优点是 nodemon，每次你对代码进行一些更改并需要它时，它会自动与调试器一起启动。

For a more detailed explanation, go through this link. Worked for me.

有关更详细的解释，请访问此链接。对我来说有效。

Answer 6

回答by Jasim Khan Afridi

For people using Nrwl:

对于使用Nrwl 的人：

Launch.json(courtesy of @ghiscoding)

Launch.json（由@ghiscoding 提供）

{
      "type": "node",
      "request": "attach",
      "name": "Attach NestJS WS",
      "port": 9229,
      "restart": true,
      "stopOnEntry": false,
      "protocol": "inspector"
    }

Terminal

终端

ng serve nestjs_project --port 9229

Answer 7

回答by chavy

This settings works for me

这个设置对我有用

{
  "name": "Launch app",
  "type": "node",
  "request": "launch",
  "args": [
    "src/main.ts"
  ],
  "runtimeArgs": [
    "-r",
    "ts-node/register",
    "-r",
    "tsconfig-paths/register"
  ],
  "cwd": "${workspaceRoot}",
  "protocol": "inspector",
  "internalConsoleOptions": "openOnSessionStart",
  "env": {
    "NODE_ENV": "local",
    "NODE_PORT": "9000"
  },
  "sourceMaps": true,
  "console": "internalConsole",
  "outputCapture": "std"
}

Get it from here

从这里获取

Answer 8

回答by kenberkeley

No need to mess up with .vscode/launch.json, just follow the official Auto Attach introand ... Just Works!

无需搞砸.vscode/launch.json，只需按照官方的Auto Attach 介绍和 ... Just Works！

For example, I wanna debug my project quiz:

例如，我想调试我的项目quiz：

Toggle "Auto Attach" to "On"

将“自动附加”切换为“开”

Run the app as usual, for this project is npm run server:dev
When the app started successfully, attach to the process

像往常一样运行应用程序，对于这个项目是 npm run server:dev
当应用程序成功启动时，附加到进程

See the first one? Click on it! Done! Now you can click on breakpoints and inspect!

看到第一个了吗？点击它！完毕！现在您可以单击断点并进行检查！

Answer 9

回答by David

I just have to "promote" this commentby @JWess to a real answer (and update it with the current location of the relevant setting) so it may be found more easily (this worked for me out of the box for a newly generated nest project, without changing any other configuration or file):

我只需要将@JWess 的这条评论“推广”为一个真正的答案（并使用相关设置的当前位置更新它），这样就可以更容易地找到它（这对我来说是开箱即用的，用于新生成的巢）项目，而无需更改任何其他配置或文件）：

If you go to Settings > Extensions > Node debugand look for the setting Debug ? Node: Auto Attachand turn it on, VSCode will auto-attach when you run npm run start:debug(i.e. nest start --debug --watch) in the integrated terminal.

如果你去Settings > Extensions > Node debug寻找设置Debug ? Node: Auto Attach并打开它，当你在集成终端中运行npm run start:debug（即nest start --debug --watch）时，VSCode 将自动附加。

typescript 使用 vscode 调试 nest.js 应用程序

提问by kentor

回答by Daniel Schmitz

回答by ghiscoding

回答by Sandeep K Nair

回答by Nelson Bwogora

回答by Priyabrata Pati

回答by Jasim Khan Afridi

回答by chavy

回答by kenberkeley

回答by David

相关推荐

最近更新

标签

typescript 使用 vscode 调试 nest.js 应用程序

提问by kentor

回答by Daniel Schmitz

回答by ghiscoding

回答by Sandeep K Nair

回答by Nelson Bwogora

回答by Priyabrata Pati

回答by Jasim Khan Afridi

回答by chavy

回答by kenberkeley

回答by David

相关推荐

typescript 根据打字稿中的属性对对象数组进行排序

typescript 如何根据用户角色 Angular 4 显示/隐藏元素

typescript 如何跨角度模块正确导入/导出类？

typescript 如何在 Angular 组件中使用枚举

相关推荐

最近更新

标签