Visual Studio Code调试chrome,Breakpoints不会命中

Question

我有一个我在VSCode中开发的Angular2 /打字稿应用程序.我使用Gulp构建typescript文件和gulp-sourcemap来创建地图文件.在对VSCode的chrome调试扩展进行一些修补之后,附加/启动chrome很有效,但我无法获得断点.我使用"dnx web"运行网站,但我认为这不重要.

我的文件夹结构是这样的:

project/wwwroot/index.html
project/wwwroot/app/myfile.js
project/wwwroot/app/myfile.js.map
project/scripts/myfile.ts

我launch.json看起来像这样:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:8001/portfolios",
      "runtimeArgs": [
          "--new-window", //Open in new window
          "--user-data-dir=C:/temp/", 
          "--remote-debugging-port=9222" 
      ],
      "webRoot": "${workspaceRoot}/wwwroot", 
      "sourceMaps": true
    }
  ]
}

我的gulp构建任务看起来像这样:

gulp.task('ts', function (done) {
  var files = gulp.src(tsToMove)
    .pipe(sourcemaps.init())
    .pipe(ts(tsConfig), undefined, ts.reporter.fullReporter());
    return files.js.pipe(sourcemaps.write(".",{sourceRoot: '../scripts'}))
    .pipe(gulp.dest('scripts'));
})

我已经验证了地图文件的生成并存储在与js文件相同的文件夹中.建设的时候.

谢谢你的任何提示.

Answer 1

将工作空间位置设置为我的打字稿文件的位置,而不是我的构建文件,为我工作.

未验证的断点(我编译的文件位置)

"webRoot": "${workspaceRoot}/build/client"

工作断点(我的ts文件位置)

"webRoot": "${workspaceRoot}/client"

我觉得我应该提一下,我正在使用Debugger for Chrome扩展程序