Question

我正在开发一个节点模块和一个示例应用程序。我试图将调试断点添加到模块中的一个源文件，但我无法让VSC识别它。使用最新版本的Typescript和VSC。

编辑：这应该是一个节点应用程序，无需担心浏览器。

EDIT2：以下是问题repo with problem.的回购这是我目前的设置

├── dist
│   ├── index.d.ts
│   ├── index.js
│   ├── index.js.map
│   ├── main.d.ts
│   ├── main.js
│   ├── main.js.map
├── examples
│   ├── index.js
│   └── package.json
├── gulpfile.js
├── package.json
├── src
│   ├── index.ts
│   ├── main.ts
├── tsconfig.json
├── tslint.json

我正在examples/index.js中开发示例，并且我在src/main.ts

中设置了断点

这是我的VSC launch.json配置

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch TypeScript",
      "type": "node",
      "request": "launch",
      "program": "${workspaceRoot}/examples/index.js",
      "sourceMaps": true,
      "outDir": "${workspaceRoot}/src",
      "args": [
        "--nolazy"
      ]
    }
  ]
}

我的tsconfig.json

{
    "compilerOptions": {
      "target": "es2015",
      "module": "commonjs",
      "sourceMap": true,
      "outDir": "dist",
      "declaration": true,
      "rootDir": "src"
    },
    "exclude": [
      "node_modules",
      "examples",
      "dist"
    ]
}

我的gulp任务

gulp.task('default', function () {
  var tsResult = tsProject.src('tsconfig.json')
    .pipe(sourcemaps.init())
    .pipe(ts(tsProject));

  return merge([
        tsResult.dts.pipe(gulp.dest('dist')),
        tsResult.js
        .pipe(sourcemaps.write('.', {includeContent: false, sourceRoot: 'src'}))
        .pipe(gulp.dest('dist'))
    ]);
});

如何制作源图

{"version":3,"sources":["main.ts"],"names":[],"mappings":";CAAC,...CAAC","file":"main.js","sourceRoot":"src"}

Answer 1

Visual Studio Code正在使用＆＃34; program＆＃34;引用文件名＆＃34; index.js＆＃34;在相应的＆＃34; outDir＆＃34;。在你的情况下，它正在寻找＆＃34; dist / index.js＆＃34;。

拥有备用条目文件会导致混淆。为避免名称冲突，＆＃34; examples / index.js＆＃34;需要是＆＃34; dist＆＃34;中不存在的唯一文件名（exampleApp.js？）。

Answer 2

您可能需要更改＆＃34; outDir＆＃34;到＆＃34; $ {workspaceRoot} / dist＆＃34;。 Node调试器使用该标志来查找生成的脚本。

打字稿来源中的断点不起作用

2 个答案: