Visual Studio Code debugs chrome, breakpoints won't hit

Question

I have an Angular2 / typescript application that I am developing in VSCode. I use Gulp to create typescript files and gulp -sourcemap to create map files. Attaching / starting chrome works well after some intervention with the chrome extension for VSCode, but I cannot get breakpoints. I am launching a website using "dnx web", but I do not think this is important.

My folder structure is as follows:

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

My launch.json as follows:

 { "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 is as follows:

 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 checked that map files are created and stored in the same folder as js files. during construction.

Thanks for any tips.

Answer 1

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

Unchecked breakpoint (location of my compiled file)

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

Working breakpoint (location of my ts file)

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

I feel like I should mention that I'm using the Debugger extension for Chrome

Answer 2

If you use a debugger to extend the chrome, would I check that you are using chrome with remote debugging? I was able to get my work after I started running chrome with remote debugging. from https://code.visualstudio.com/blogs/2016/02/23/introducing-chrome-debugger-for-vs-code

Now Chrome needs to be started with remote debugging, and supports only one simultaneous connection. This means that if you open DevTools inside Chrome, the connection to VS Code will be terminated by Chrome. This is a little annoying, and we hope that this problem will be fixed in the near future.

For this, I have a batch file that opens chrome with this command.

 start /d "C:\Program Files (x86)\Google\Chrome\Application" chrome.exe --remote-debugging-port=9222 

Answer 3

So, I met with this for hours, and finally got his job: RVCA18 was right with his answer:

You need to make sure that webRoot installed correctly and will depend on where you start dnx from. If from your folder "project", then this is your actual webRoot.

You can also use the sourcemap file. If you open the file, it will have the following structure: {"version":3,"sources":[],"names":[],"sourcesContent":[]}

Find sources prop, which is an array of all your source files. For example, if I search for one of my class names, I think the source will be something like: "webpack:///./app/components/TargetCard.js" . I use webpack and have a dir structure as shown below (simplified):

 main app dist 

which means that my webRoot with respect to VSCode should be level one level above "app" or "main". This is also where I run webpack, so that makes sense. If I open the "main" folder in VSCode, then my ${workspaceRoot} will also be "main", so for the debugger to find my files, I have to install webRoot just ${workspaceRoot} .