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
My launch.json
looks like this:
{
"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
}
]
}
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'));
})
I have verified that maps files are generated and stored in the same folder as the js files. when building.
Thanks for any hints.
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"
Working Breakpoint (my ts file location)
"webRoot": "${workspaceRoot}/client"
I feel I should mention that I am using the Debugger for Chrome extension