调试并重新启动更改 typescript vscode

Posted 2023-03-13

【中文标题】调试并重新启动更改 typescript vscode

【英文标题】：Debug and restart on changes typescript vscode

【发布时间】：2018-07-06 08:30:04

【问题描述】：

我想在 typescript 文件上调试和设置断点，并在使用 VSCode 调试器配置进行更改（例如 nodemon watch for changes）时重新启动调试器。

到目前为止，我已经通过 VSCode 运行并重新启动更改而无需调试。

这是我的 launch.json：

    "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"
        

有什么想法吗？

【问题讨论】：

您到底想达到什么目标？您已经将所有调试配置放在您的 launch.json 中。启动应用程序肯定会让你的应用程序在 vscode 中进入调试模式。

我想在 ts 文件上调试和设置断点，我现在实际上无法做到。

您始终可以在任何代码语句上添加断点，方法是单击要中断代码的语句旁边的左侧。行号后面的编辑器左侧的小竖条专门用于断点。

我知道如何设置断点...不要那样侮辱我:(那不是问题。我可以设置断点但调试器永远不会到达它们所以这就是我问这个问题的原因，用于找到一种方法来实现调试并在进行更改时重新启动。

老实说，我从来没有侮辱的意思，如果真的被察觉，我很抱歉。但是作为一个读者，这个问题是很不清楚的。

【参考方案1】：

想知道为什么有这么多 WTF cmets 在这个完全自然的问题上。这是我的做法：

我们需要 nodemon 来重启我们的应用程序，我们需要 ts-node/register 来运行我们的 typescrypt，我们需要设置 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 here。

【讨论】：

这为我指明了正确的方向。我不得不调整我的手表：调试任务："watch:debug": "nodemon -e ts,tsc --exec\"node --inspect=5858 -r ts-node/register ./src/server.ts\"" 如果没有额外的引号，npm 命令将无法为我运行

这对我有用。我需要再次浏览文档以弄清楚其中一些开关的含义。

【参考方案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

【参考方案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
        

【参考方案4】：

不清楚您到底在问什么，但这可能会有所帮助。 尝试在您的

中添加这些配置

 "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 变量包含当前打开的文件） 为节点传递 --nolazy 参数，它告诉 v8 提前编译您的代码，以便断点正常工作 传入 -r ts-node/register for node，确保在尝试执行代码之前加载 ts-node 将工作目录设置为项目根目录 - $workspaceRoot 将节点调试协议设置为 V8 Inspector 模式。

我怀疑你错过了

 "runtimeArgs": ["--nolazy"]

在您启动配置时。

【讨论】：

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

【参考方案5】：

这个对我有用。我正在同时使用 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"
        
    ]

【讨论】：

你的 nodemon.json 和 tsconfig.json 是什么样的？

还有你的 package.json 是什么样子的？