无法在 VS Code 中设置断点调试节点 Typescript

Posted 2023-02-15

【中文标题】无法在 VS Code 中设置断点调试节点 Typescript

【英文标题】：Can't set Breakpoints debugging Node Typescript in VS Code

【发布时间】：2018-10-16 15:42:58

【问题描述】：

我看到其他问题与相同的问题，但我已经尝试了所有其他解决方案，但没有任何效果。

我有一个打字稿节点应用程序，我正在尝试在 VSCode 中进行调试。

我的 launch.json 是

 "version": "0.2.0",
  "configurations": [
    
      "type": "node",
      "request": "attach",
      "name": "Attach",
      "port": 5858,
      "sourceMaps": true,
      "outFiles": ["$workspaceRoot/build/**/*.js"]
    
  ]

这可以很好地附加到我的应用程序。我可以暂停和恢复，一切正常，但我无法进入代码或设置断点。

我正在通过 gulp nodemon 运行我的应用程序

nodemon(
    script: 'build/server.js',
    watch: 'src',
    ext: 'ts',
    tasks: ['clean', 'compile'],
    exec: 'node --debug'
);

控制台输出

调试器监听 [::]:5858

现在当我尝试设置断点时，它会说

未验证的断点，因为找不到生成的代码而忽略了断点（源映射问题？）。

更新；

我也尝试过使用其他帖子所建议的webRoot 项目，键入验证抱怨Property webRoot is not allowed.，我尝试继续无济于事。

我正在运行 Node v6.11.5 和 VS Code v1.23.0

我在帖子中看到人们调用运行 .scripts 标记以获取更多信息以帮助解决，但是当我在调试控制台中输入 .scripts 时，它显示 invalid expression: unexpected token .

我的 tsconfig.json 是

"compilerOptions": 
    "outDir": "build",
    "target": "es6",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "typeRoots": ["node_modules/@types"]
  ,

但是；我的构建文件夹中没有 .js.map 文件。我正在通过 gulp-typescript 运行构建，如下所示

gulp.task('compile', () => 
    tsProject = ts.createProject('tsconfig.json');
    let tsResult = tsProject.src().pipe(ts());

    return merge([
        tsResult.dts.pipe(gulp.dest('build/definitions')),
        tsResult.js.pipe(gulp.dest('build'))
    ]);
);

根据建议，我还添加了以下 gulp 任务

gulp.task('jsMaps', function() 
    gulp.src('build/**/*.js')
      .pipe(sourcemaps.init())
      .pipe(sourcemaps.write())
      .pipe(gulp.dest('build'));
  );

并确认我的构建 .js 文件具有内联编写的源映射，看起来像 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlc...........，但在尝试设置断点时我仍然遇到相同的错误。

【参考方案1】：

自从更新 VS Code 后，我无法再调试应用程序。

通过下载 1.23，我能够再次调试。

请参阅此处发布的答案：

How to downgrade vscode

也在这里：

Visual Studio Code - Node debugger breakpoints not being hit

【参考方案2】：

为了调试 typescript，您需要生成 sourcemap 文件。确保以下内容在您的tsconfig.json 中，您应该会看到在您的构建目录中生成的.js.map 文件。

  "compilerOptions": 
    "sourceMap": true
  

---

使用 gulp-typescript：

gulp-typescript 建议使用gulp-sourcemaps 来生成源映射。

这是我创建.js.map 断点处中断的文件的 gulp 任务。找到in this gulp-typescript issue

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

gulp.task('compile', () => 
    tsProject = ts.createProject('tsconfig.json');
    let tsResult = tsProject.src()
        .pipe(sourcemaps.init())
        .pipe(tsProject());

    tsResult.js
        .pipe(sourcemaps.write(
          sourceRoot: function (file) 
            var sourceFile = path.join(file.cwd, file.sourceMap.file);
            return path.relative(path.dirname(sourceFile), file.cwd);
          
        ))
        .pipe(gulp.dest('build'));
);

【讨论】：

我将我的 tsconfig.json 添加到了答案中。它已经有"sourceMap": true 在那里......但是我的构建目录中没有.js.map 文件，只有.js 文件。在某处是否有其他设置，我在问题中添加了如何使用 gulp-typescript 在 gulp 中构建它

我用快速搜索后发现的内容编辑了我的帖子，我现在不在，没有时间亲自尝试。不过看起来gulp-sourcemaps 值得研究

伙计，我以为就是这样！尝试了几种不同的方法，但没有骰子。用信息更新了我的问题。有什么方法我应该指定地图文件是内联的，而不是他们自己的文件？

太棒了，谢谢！我收到一些 TS 错误，显示为 error TS2300: Duplicate identifier 'Promise'.，但调试问题已解决。

Awesome it works - 啊啊啊，我已经到了纸质记录的尽头，但解决方案仍然难以捉摸。你做了什么让它发挥作用？