无法在VS Code中调试Node TypeScript设置断点

Question

无法在VS Code中调试Node TypeScript设置断点

node.jstypescriptdebuggingvisual-studio-codevscode-debugger

11

我看到其他有同样问题的问题，但是我已经尝试了所有其他解决方案，但在我的环境中没有任何作用。

我正在尝试在VSCode中调试一个typescript Node应用程序。

我的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项，但类型验证会抱怨属性webRoot不允许。我尝试继续进行，但没有效果。

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

我曾经看到有人在帖子中呼吁运行.scripts标签以获得更多信息来帮助解决问题，但是当我在调试控制台中输入.scripts时，它会显示无效表达式：意外的令牌.

我的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...........，但是当我尝试设置断点时仍然出现相同的错误。

- Joshua Ohana

2个回答

2

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

通过下载1.23版本，我又可以进行调试了。

请查看此处发布的答案：如何降级vscode 以及这里： Visual Studio Code - Node debugger breakpoints not being hit

- JoshuaTree

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Clint · Accepted Answer

为了调试TypeScript代码，您需要生成源代码映射文件。请确保以下内容在您的tsconfig.json文件中，这样您就可以看到在您的构建目录中生成了.js.map文件。

{
  "compilerOptions": {
    "sourceMap": true
  }
}

使用gulp-typescript:

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

下面是我创建工作正常、能够在断点处中断的.js.map文件的gulp任务。问题可以在这个gulp-typescript问题中找到。

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'));
});