调试和重新启动TypeScript VSCode上的更改

Question

我希望能够使用VSCode调试器配置，在TypeScript文件上进行调试并设置断点，并在更改时重新启动调试器（类似于nodemon对更改的监视）。请参照以下的launch.json文件，目前已经可以通过VSCode运行，并且在更改时进行了重新启动但没有进行调试。

{
    "name": "Launch Typescript Server Debugger",
    "request": "launch",
    "type": "node",
    "cwd": "${workspaceRoot}",
    "protocol": "inspector",
    "stopOnEntry": false,
    "program": "${workspaceRoot}/node_modules/nodemon/bin/nodemon",
    "args": [
      "--watch",
      "src/**/*.ts",
      "--ignore",
      "src/**/*.spec.ts",
      "--exec",
      "${workspaceRoot}/node_modules/.bin/ts-node",
      "--inspect",
      "src/app.ts"
    ],
    "restart": true,        
    "env": { "NODE_ENV": "dev"}
  }      

有什么想法吗？

- importantquestion

---

你想要实现什么目标？你已经在launch.json中设置了所有的调试配置。启动应用程序肯定会将你的应用程序置于VSCode的调试模式下。 - Maddy Blacklisted

我想要在ts文件上进行调试并设置断点，但现在实际上我无法做到。 - importantquestion

您可以通过单击左侧与要中断代码的语句相邻的位置，在任何代码语句上添加断点。编辑器左侧的小垂直条仅用于断点。 - Maddy Blacklisted

我知道如何设置断点...不要这样侮辱我 :( 问题不在于我不会设置断点，而是调试器永远无法到达它们，所以我问了这个问题，为了找到一种实现调试和在更改后重新启动的方法。 - importantquestion

说实话，我从未有意冒犯，如果有人这样理解，我很抱歉。但作为读者，这个问题确实不太清楚。 - Maddy Blacklisted

谈论咬伤一只只是试图帮助你的手。激励我们继续尝试帮助你，这确实符合你的最佳利益。 - Hovercraft Full Of Eels

Answer 1

不明白为什么有这么多人对这个很自然的问题发表“WTF”评论。以下是我完成它的方法：

我们需要 nodemon 来在更改时重新启动应用程序，我们需要 ts-node/register 来运行我们的 TypeScript，并且我们需要设置 vscode 的启动器脚本以在重新编译应用程序后重新连接调试器。因此，请安装 nodemon、ts-node 并将此脚本添加到 package.json 文件中：

"watch:debug": "nodemon --inspect=5858 -e ts,tsx --exec node -r ts-node/register ./src/index.ts"

然后在 launch.json 中添加配置：

{
  "name": "Attach to Process",
  "type": "node",
  "request": "attach",
  "restart": true,
  "port": 5858,
  "outFiles": [],
  "sourceMaps": true
},

现在已经完成了，我可以使用yarn watch:debug启动我的应用程序并附加调试器。 如果您仍然遇到问题，请在我的Github repo这里查看。

- Anton Pegov

---

这指引我朝着正确的方向前进。我必须调整我的watch:debug任务: "watch:debug": "nodemon -e ts,tsc --exec\"node --inspect=5858 -r ts-node/register ./src/server.ts\"" 如果没有额外的一对引号，npm命令就无法运行。 - Dave

这对我有用。我需要再次查看文档，以弄清一些开关的含义。 - Kai CriticallyAcclaimed Cooper

直截了当。如此完美运作！ - Ho Chung Wong

Answer 2

你应该一定要尝试一下 ts-node-dev，在观察编译方面，它比 nodemon 更快，因为它在重新启动时会共享 Typescript 编译过程。以下是 vscode 的示例 launch.json 配置，可让您设置断点（调试）以及在更改后重新加载。

{
  "version": "1.0.0",
  "configurations": [
    {
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen",
      "name": "Local Server",
      "restart": true,
      "request": "launch",
      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/ts-node-dev",
      "skipFiles": [ "<node_internals>/**" ],
      "type": "node",
      "runtimeArgs": [ "--respawn" ],
      "args": [ "${workspaceFolder}/src/script/local.server.ts" ]
    }
  ]
}

现在您可以按下 F5 或使用调试面板开始调试/实时重新加载。

如果您恰好使用 aws lambda 进行开发，我为此打包了一个小型库。

https://github.com/vcfvct/ts-lambda-local-dev

- LeOn - Han Li

---

这正是我在寻找的，谢谢你，Leon。 - undefined

Answer 3

如果不使用ts-node，您可以使用此配置在更改后重新启动

task.json

这个任务会监视ts文件并在保存时编译它们。

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "typescript",
            "type": "typescript",
            "tsconfig": "tsconfig.json",
            "problemMatcher": ["$tsc-watch"],
            "option": "watch"
        }
    ]
}

然后在 launch.json 中,

如果有更改，nodemon 会重新加载（在我的情况下，构建的文件在 dist 目录中）

       {
            "type": "node",
            "request": "launch",
            "runtimeExecutable": "nodemon",
            "args": ["--watch", "dist"],
            "name": "Debug TypeScript in Node.js",
            "preLaunchTask": "typescript",
            "program": "${workspaceFolder}/start.js",
            "cwd": "${workspaceFolder}",
            "protocol": "inspector",
            "outFiles": ["${workspaceFolder}/dist/**/*.js"],
            "restart": true
        }

- Mickael Lecoq

Answer 4

这个对我很有用。我正在使用TypeScript和Node一起工作。

这是我的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": "Launch Program",
            "program": "${workspaceFolder}/src/index.ts",
            "preLaunchTask": {
                "type": "typescript",
                "tsconfig": "tsconfig.json",
                "option": "watch",
                "problemMatcher": [
                    "$tsc-watch"
                ],
                "group": "build"
            },
            "outFiles": [
                "${workspaceFolder}/lib/**/*.js"
            ],
            "runtimeExecutable": "nodemon",
            "restart": true,
            "console": "integratedTerminal",
            "internalConsoleOptions": "neverOpen"
        }
    ]
}

- Ali Shah lakhani

---

你的 nodemon.json 和 tsconfig.json 长什么样子？ - Mike Kormendy

还有，你的 package.json 文件长什么样？ - Mike Kormendy

Answer 5

不太清楚你具体在问什么，但这可能会有所帮助。 尝试在你的配置中添加以下内容：

{
 "name": "Current TS File",
 "type": "node",
 "request": "launch",
 "args": ["${relativeFile}"],
 "runtimeArgs": ["--nolazy", "-r", "ts-node/register"],
 "sourceMaps": true,
 "cwd": "${workspaceRoot}",
 "protocol": "inspector",
}

这个配置：

• 设置了一个节点任务，在 VS Code 中启动当前打开的文件（${relativeFile} 变量包含当前打开的文件）
• 为 node 传递 --nolazy 参数，告诉 v8 预先编译您的代码，以便断点正常工作
• 为 node 传递 -r ts-node/register，确保在执行代码之前加载了 ts-node
• 将工作目录设置为项目根目录 - ${workspaceRoot}
• 将节点调试协议设置为 V8 检查器模式。

我怀疑你少了

 "runtimeArgs": ["--nolazy"]

在你的启动配置中。

- Maddy Blacklisted

---

好的，这只在我在“src/app.ts”文件上启动它时才有效，但是当我编辑文件并保存更改时，它不会像以前的配置那样重新启动。 - importantquestion