Question

我在同一个问题上看到了其他问题，但我已经尝试了所有其他解决方案，但我的工作没有任何效果。

我有一个打字节点应用程序，我试图在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运行build，如下所示

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...........，但我在尝试设置断点时仍然遇到相同的错误。

Answer 1

要调试打字稿，您需要生成源图文件。确保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'));
});

Answer 2

自更新VS代码以来，我无法再调试应用程序。

通过下载1.23，我可以再次进行调试。

请查看此处发布的答案：

How to downgrade vscode

也在这里：

Visual Studio Code - Node debugger breakpoints not being hit

无法在VS代码中设置断点调试节点打字稿

2 个答案:

使用gulp-typescript：