Question

我目前正在尝试从Visual Studio Code调试用TypeScript编写的Node JS应用程序，但我遇到了一些问题。我的情况类似于此question

中描述的情况

|-- .settings
|----- launch.json
|-- bin
|----- app.js
|----- app.js.map
|--src
|----- app.ts
|-- tsconfig.json

然后我有 tsconfig.json 文件：

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "outDir": "bin",
        "rootDir": "src",
        "sourceMap": true
    }
}

app.ts ：

console.log("Hello World!");

launch.json ：

{
    "version": "0.1.0",
    "configurations": [
        {
            "name": "Launch type",
            "type": "node",
            "program": "src/app.ts",
            "stopOnEntry": false,
            "sourceMaps": true,
            "outDir": "bin"
        }
    ]
}

然后我使用

从命令行手动编译项目

tsc

所以我在 bin 目录中获得了两个文件。我在 app.ts 上设置了断点，最后使用 F5 运行解决方案，应用程序启动并停在右侧，但在 JS 上而不是 TS 一个：为什么???

我做错了什么或试图实现不可能的事情？

非常感谢你的帮助！：）

修改

我刚刚在GitHub分享了我的项目，以便让事情变得更轻松！看看你能不能！：）

Answer 1

绝对可能。

最可能的原因是node.js无法使用生成的map.js文件找到相应的ts文件。您可以尝试指定＆＃34; sourceRoot＆＃34;在tsconfig.json中指向项目的根目录：

sourceRoot: "/Users/SomeUser/projects/test"

我个人更喜欢使用gulp用于此目的，在我的情况下它看起来像这样（注意 - 我没有使用node.js全局变量＆＃39; __ dirname＆＃39;来硬核这里的sourceRoot路径）：

var ts = require('gulp-typescript');

gulp.task('build.js.dev', function() 
{
    var tsProject = ts.createProject('tsconfig.json');

    var tsResult = tsProject.src()
        .pipe(sourcemaps.init())   
        .pipe(ts(tsProject));  

    return merge([
        //Write definitions 
        //tsResult.dts.pipe(gulp.dest("bin")),
        //Write compiled js
        tsResult.js.pipe(sourcemaps.write("./", { sourceRoot: __dirname })).pipe(gulp.dest("bin"))]);
});

之后检查生成的map.js文件。它应该在开头包含类似这样的行：

"sources":["src/app.ts"]

最后：

"sourceRoot":"/Users/SomeUser/projects/test"

组合在一起时，它们必须指向app.ts文件的有效位置。如果不是 - 相应地调整sourceRoot。

[编辑]

以下项目的部分与您的相同（没有gulp） - 我可以在我的机器上进行调试。

launch.json：

{
    // Name of configuration; appears in the launch configuration drop down menu.
    "name": "Launch Server",
    // Type of configuration.
    "type": "node",
    // Workspace relative or absolute path to the program.
    "program": "${workspaceRoot}/src/app.ts",
    // Automatically stop program after launch.
    "stopOnEntry": false,
    // Command line arguments passed to the program.
    "args": [],
    // Workspace relative or absolute path to the working directory of the program being debugged. Default is the current workspace.
    "cwd": "${workspaceRoot}",
    // Workspace relative or absolute path to the runtime executable to be used. Default is the runtime executable on the PATH.
    "runtimeExecutable": null,
    // Optional arguments passed to the runtime executable.
    "runtimeArgs": ["--nolazy"],
    // Environment variables passed to the program.
    "env": {
        "NODE_ENV": "development"
    },
    // Use JavaScript source maps (if they exist).
    "sourceMaps": true,
    // If JavaScript source maps are enabled, the generated code is expected in this directory.
    "outDir": "${workspaceRoot}/bin",
    "request": "launch"
}

tsconfig.json：

{ 
    "compilerOptions": { 
        "emitDecoratorMetadata": true, 
        "experimentalDecorators": true,
        "moduleResolution": "node",
        "module": "commonjs", 
        "target": "es6",
        "sourceMap": true,
        "outDir": "bin",
        "declaration": true,
        "noImplicitAny": true
    },
    "exclude": [
        "node_modules",
        "bin",
        ".vscode",
        "typings/browser.d.ts",
        "typings/browser/**"
    ]
}

在tasks.json中构建任务：

{
    "version": "0.1.0",

    // The command is tsc. Assumes that tsc has been installed locally using npm install typescript
    "command": "${workspaceRoot}/node_modules/typescript/bin/tsc",

    // The command is a shell script
    "isShellCommand": true,

    // Show the output window only if unrecognized errors occur.
    "showOutput": "silent",

    // args is the HelloWorld program to compile.
    "args": [],

    // use the standard tsc problem matcher to find compile problems
    // in the output.
    "problemMatcher": "$tsc"
}

[编辑]

我已经对您的git存储库进行了以下次要更新，以便能够在本地进行调试。

在根文件夹中添加package.json，并指定tsc作为依赖项（我更喜欢本地安装）：

{
  "name": "123",
  "namelower": "123",
  "version": "0.0.1",
  "private": true,
  "dependencies": {
  },
  "devDependencies": {
    "typescript": "latest"
  }
}

然后转到你的git＆＃34; stackoverflow＆＃34;根文件夹并在命令提示符下运行：

npm install

更改tasks.json＆＃34;命令＆＃34;行到：

"command": "${workspaceRoot}/node_modules/typescript/bin/tsc",

完成这些步骤并构建项目后，我能够在app.ts中放置一个断点，并在运行时将VSCode停在它上面（F5）

[UPDATE]

与Windows兼容的tasks.json版本：

{
    "version": "0.1.0",
    "command": "tsc",

    "showOutput": "always",

    "windows": {
        "command": "node.exe"
    },

    "args": ["${workspaceRoot}\\node_modules\\typescript\\bin\\tsc.js"],

    "problemMatcher": "$tsc"    
}

希望这有帮助。

Answer 2

这就是调试我的打字稿（快速）项目的方式。使用ts-node，您不必手动进行编译。使用此配置，我直接在我的打字稿文件中调试。希望这对某人有帮助。

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

Answer 3

在试图弄清楚如何使用 aws Lambda 调试 TS+nodejs 时遇到了同样的问题。看起来 ts-node-dev 包在 watch TS 文件更改方面比 nodemon 快。

<块引用>

npm install ts-node-dev --save-dev

最后在 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 应该会使用本机 http 或 express/koa/hapi... 等启动您的本地服务器。现在您可以在代码中设置断点。此外，ts-node-dev 将在每次保存时监视 TS 文件更改并重新加载服务器。

如果您碰巧使用 aws lambda

开发，我会为此打包一个小型库

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

Visual Studio代码 - 通过TypeScript调试节点JS

3 个答案: