代码之家 › 专栏 › 技术社区 › Joshua Ohana

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

vscode-debugger visual-studio-code debugging typescript node.js

Joshua Ohana · 技术社区 · 6 年前

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

我有一个typescript节点应用程序,我正试图在VSCode中调试它。

我的发布。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 正如周围其他帖子所建议的那样,键入validation抱怨 Property webRoot is not allowed. ,我无论如何都试着继续,但没有成功。

我正在运行Node v6。11.5和VS代码v1。23

我在一篇帖子中看到有人打电话来管理。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.task('jsMaps', function() {
    gulp.src('build/**/*.js')
      .pipe(sourcemaps.init())
      .pipe(sourcemaps.write())
      .pipe(gulp.dest('build'));
  });

确认了我的身材。js文件具有内联编写的源映射,如下所示 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlc........... ,但在尝试设置断点时仍会遇到相同的错误。

2 回复 | 直到 6 年前

Clint 6 年前

为了调试typescript,您需要生成sourcemap文件。确保您的 tsconfig.json ,您应该看到 .js.map 生成目录中生成的文件。

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

使用gulp typescript:

gulp-typescript 表明 gulp-sourcemaps 应用于生成源映射。

这是我一直在做的吞咽任务 .js。地图 断点中断的文件。建立 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'));
});

JoshuaTree 6 年前

由于更新VS代码,我无法再调试应用程序。

通过下载1.23,我可以再次调试。

请参见此处发布的答案:

How to downgrade vscode

这里也有:

Visual Studio Code - Node debugger breakpoints not being hit