Visual Studio Code调试Chrome，断点不会命中 [英] Visual Studio Code debugging chrome, Breakpoints wont hit

问题描述

我有一个用VSCode开发的Angular2/typescript应用程序.我使用Gulp构建打字稿文件，并使用gulp-sourcemap创建地图文件.在修改了VSCode的chrome调试扩展程序后，附加/启动chrome可以很好地工作，但是我无法找到断点.我使用"dnx web"运行该网站，但我认为这无关紧要.

I have a Angular2/typescript app I am developing in VSCode. I use Gulp to build the typescript files and gulp-sourcemap to create map files. Attaching/launching chrome works well after some tinkering with the chrome debug extension for VSCode, but I cannot get the breakpoints to hit. I run the website with "dnx web", but I don't think that should matter.

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

My folder structure is like this:

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构建任务看起来像这样:

and my gulp build task looks like this:

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文件相同的文件夹中.建造时.

I have verified that maps files are generated and stored in the same folder as the js files. when building.

感谢任何提示.

推荐答案

将工作区位置设置为我的打字稿文件而不​​是我的构建文件的位置对我有用.

Setting the workspace location to the location of my typescript files, and not my build files, worked for me.

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

Unverified Breakpoint (my compiled file location)

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

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

Working Breakpoint (my ts file location)

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

我应该提到我正在使用 Debugger for Chrome 扩展程序

I feel I should mention that I am using the Debugger for Chrome extension

这篇关于Visual Studio Code调试Chrome，断点不会命中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！