问题
I'm using Visual Studio 2017 version 15.5.7 for my .NET web API project and I'm using Syncfusion's angular controls with systemJS for UI. Problem is, that I cannot debug typescript at all. I can place a breakpoint and it appears like normal regular breakepoint until i hit debug, then it becomes unavailable with message:
The breakpoint will not currently be hit. No code has been loaded for this code location.
I tried debugging with Chrome, Firefox, Edge and IE, but to no avail. .map files are generated on build and I can debug transpiled javascript files in Chrome dev tools. Also, I should mention that I cannot navigate to my typescript files in Chrome. Just generated javascript files.
UPDATE:
I should also mention that all of the options in web project Properties -> TypeScript Build are disabled and there's a message:
One or more tsconfig.json files detected. Project properties are disabled.
I have added only one tsconfig.json file. Is VS using some internal one? Could this be a problem? Also there are some more tsconfig.json files in my node_modules folder.
回答1:
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
回答2:
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
回答3:
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.
回答4:
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,
来源：https://stackoverflow.com/questions/48927103/typescript-debugging-not-working-in-visual-studio-2017