Question

我有一个用TypeScript编写的Chromium扩展程序，试图从VS Code调试。

即使当我使用扩展程序启动Edge Dev时，断点在VS Code中以红色点亮，它也没有受到攻击。在VS的F5上，页面加载，并且我看到一个控制台日志，上面写着我正在调试的文件，但是该控制台日志上的断点不会触发。如果我刷新页面，则执行会暂停，并且VS就像是遇到断点一样，但是它会弹出jquery-3.3.1.min.js，而不是我的源文件。

Gulp处理将扩展编译为JS并生成地图文件。

我的应用程序结构非常典型：

   - .vscode
       - launch.json
   - src
       - tsconfig.json
   - dist
   - gulpfile.js

我已经确认我的gulpfile.js与https://github.com/ivogabe/gulp-typescript-sourcemaps-demo中所示的模型匹配。在dist文件夹中生成的.map文件内部，我发现它正确包含"sourceRoot":"../src"。

launch.json：

  "version": "0.2.0",
  "configurations": [
    {
      "type": "edge",
      "request": "launch",
      "version": "dev",
      "name": "Launch Edge (Chromium) against mysite",
      "url": "https://example.com/",
      "webRoot": "${workspaceFolder}/dist"
    }
  ]
}

tsconfig.json：

  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "target": "es6",
    "module": "none",
    "outDir": "../dist/"
  },
  "types": ["chrome", "jquery"]
}

gulpfile.js：

var ts = require("gulp-typescript");
var sourcemaps = require("gulp-sourcemaps");

var tsProject = ts.createProject("./src/tsconfig.json");

gulp.task("default", ["compile", "copyresources"]);

gulp.task("compile", function() {
  return gulp
    .src("src/**/*.ts")
    .pipe(sourcemaps.init())
    .pipe(ts())
    .pipe(
      sourcemaps.write(".", { sourceRoot: "../src", includeContent: false })
    )
    .pipe(gulp.dest("dist"));
});

gulp.task("copyresources", function() {
  gulp.src("./src/icons/*").pipe(gulp.dest("./dist/icons"));
  gulp.src("./src/images/*").pipe(gulp.dest("./dist/images"));
  gulp
    .src([
      "./src/manifest.json",
      "./src/jquery-3.3.1.min.js",
      "./src/options.html"
    ])
    .pipe(gulp.dest("./dist"));
});

任何人都知道为什么它不起作用吗？

从VS Code调试TypeScript时，断点会亮起，但不会命中

0 个答案: