Typescript debugging not working in Visual Studio 2017

You can't debug, typescript in visual studio 2017.but you can debug it in chrome under source section.Refer the image file.

http://www.gamefromscratch.com/post/2014/05/27/TypeScript-debugging-in-Visual-Studio-with-IE-Chrome-and-Firefox-using-Source-Maps.aspx

In Visual Studio 2017, Typescript files are transpile to JavaScript files using gulp file and the application is served from wwwroot folder. So we can only able to debug the JavaScript files in devTools of Chrome. To debug the TypeScript files in Chrome, we need to create Map files in our application. To create map files, Refer the below code snippet.

[gulpfile.js]

/* 
This file in the main entry point for defining Gulp tasks and using Gulp 
plugins. 

Click here to learn more. http://go.microsoft.com/fwlink/?LinkId=518007 

*/ 

var ts = require('gulp-typescript'); 

var gulp = require('gulp'), 

rimraf = require('rimraf'); 

gulp.task('clean', function (cb) { 
return rimraf('./wwwroot/lib/', cb) 

}); 

gulp.task('copy:lib', function () { 
return gulp.src('node_modules/**/*') 
    .pipe(gulp.dest('./wwwroot/lib/')); 

}); 

gulp.task('copy:systemjs', function () { 
return gulp.src('src/systemjs.config.js') 
    .pipe(gulp.dest('./wwwroot/')); 

}); 

var tsProject = ts.createProject('src/tsconfig.json', { 
typescript: require('typescript') 

}); 

var sourcemaps = require('gulp-sourcemaps'); 

var path = require('path'); 

gulp.task('ts', function () { 
var tsResult = gulp.src("src/**/*.ts").pipe(sourcemaps.init()) 
    .pipe(tsProject()); 
returntsResult.js.pipe(sourcemaps.write('.')).pipe(gulp.dest('./wwwroot')); 

}); 

gulp.task('watch', ['watch.ts']); 

gulp.task('watch.ts', ['ts'], function () { 
return gulp.watch('src/**/*.ts', ['ts']); 

}); 

gulp.task('default', ['watch']); 

We have prepared a sample and attached below. Please refer the sample link.

Sample

Please let us know if you need further assist on this.

Thanks, Subha Shree D.R

You can debug your typescript project in VS2017. There are few elements you need to ensure is enabled and before you can. Under Options look for Enable JavaScript debugging for ASP.NET (Chrome and IE) which should be ticked (enabled) or else you will not be able to debug using the IDE.

If it still doesn't work, then make sure you Shelve your pending changes and then proceed to the following respective directory locations to delete the cache.

Delete the contents from the following folders

C:\Users\<<Your Alias>>\AppData\Local\Microsoft\Team Foundation
C:\Users\<<Your Alias>>\AppData\Local\Microsoft\VisualStudio
C:\Users\<<Your Alias>>\AppData\Local\Microsoft\VSCommon

Once done, you will need to signin to your TFS account, and ideally should hit the debug breakpoint in your typescript project.

Easiest thing to do is inline the mapping, so that even packing works. try the following settings in your tsconfig:

//"sourceMap": true,
"inlineSourceMap": true,
"inlineSources": true,