Visual Studio Code - 通過 TypeScript 調試 Node JS

Question

我目前正在嘗試從 Visual Studio Code 調試用 TypeScript 編寫的 Node JS 應用程序，但我遇到了一些問題。 我的情況類似於此問題中描述的情況

|-- .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!");

啟動.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 文件。 您可以嘗試在 tsconfig.json 中指定“sourceRoot”以指向項目的根目錄：

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

就我個人而言，我更喜歡為此目的使用 gulp，在我的情況下，它看起來像這樣（注意 - 我在這里沒有通過使用 node.js 全局變量 '__dirname' 來硬核 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） - 我可以在我的機器上進行調試。

啟動.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 "stackoverflow" 根文件夾並在命令提示符下運行：

npm install

將 tasks.json “命令”行更改為：

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

完成這些步驟並構建項目后，我能夠在 app.ts 中放置一個斷點，並且 VSCode 在運行時停止（F5）

[更新]

與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

2022 年7 月不需要額外的東西（如 gulp 等）

步驟1：

只需全局安裝ts-node ：

npm i -g ts-node

第2步：

在 launch.json (VSCode) 中添加新配置。 以下是針對 macOS 的； 對於其他操作系統，相應地修改runtimeExecutable屬性：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "TypeScript Debugging",
      "type": "node",
      "request": "launch",
      "args": ["${relativeFile}"],
      "cwd": "${workspaceRoot}",
      "runtimeExecutable": "/opt/homebrew/bin/ts-node"
    }
  ]
}

第 3 步：

打開要調試的 TypeScript 文件並設置斷點。

第4步：

然后單擊左側的“運行和調試”。

備份： tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "lib": ["ESNext", "DOM"],
    "module": "esnext",
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipDefaultLibCheck": true,
    "skipLibCheck": true,
    "sourceMap": true
  }
}

Answer 3

這就是我調試我的 typescript (express) 項目的方式。 使用 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 4

在試圖弄清楚如何使用 aws Lambda 調試 TS+nodejs 時遇到了同樣的問題。 看起來ts-node-dev包在監視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