How to debug Typescript in Visual Studio 2015 asp.net 5?

Question

Is there a way to debug typescript files from visual studio 2015 CTP6 asp.net 5 application? If not then maybe there is a way to configure source map files, so when I debug them in browser and can automatically save changes to my .ts files on server? This might be hard, because .ts files are compiled by gulp, but maybe somebody found good solution for that?

Solution 1

Debugging TypeScript with Visual Studio works with the right settings.

1. First you make sure that you create source maps when compiling TypeScript to JavaScript. So you should have an xxx.js.map file near every xxx.js.

   Getting source maps by running the TypeScript compiler outside of Visual Studio does not cause any difficulty, at the tsc command line add:

   --sourcemap %1.ts
   

   your gulp script will usually create sourcemaps by default.

2. Configure your web application in Visual Studio.

   Set Internet Explorer as the start browser. I got it working only with IE and don't think any other browser will work. (edit: Somewhere I read that there is a Webkit debugging bridge, so Chrome debugging should be possible, but I do not remember the source.)

   In the project properties go to the "Web" tab and configure the "Debuggers" section at the bottom: Disable all debuggers! This is counter intutitive and you might see this error message:

   You have attempted to start the debugger, but based on your current debug settings on the Web properties page there is no process to debug.

   This occurs when the "Don't open a page. Wait for a request from another process" option is selected, and ASP.NET debugging is disabled. Please check your settings on the Web properties page and try again. As the error message says, the Start Action at the top of the Web properties should be another option, like "Current page".

   Set breakpoints in your .ts code inside Visual Studio now or later.

   Hit F5

While you can use the Visual Studio Editor to debug and edit .ts files, "Edit and Continue" will not work, there is currently no browser that can reload .js and .js.map files and continue. (Correct me anyone if I am wrong and I will be happy.)

Solution 2

The best way to handle map files I found is to include the source inside the generated .js files themselves. This is obviously a solution for a dev environment only.

my tsconfig.json below:

{
    "compilerOptions": {
        "noImplicitAny": false,
        "noEmitOnError": true,
        "removeComments": false,
        "target": "es5",
        "module": "system",
        "moduleResolution": "node",
        "outDir": "./wwwroot/scripts",
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
        "inlineSourceMap": true,
        "inlineSources": true
    },
    "exclude": [
        "node_modules",
        "wwwroot"
    ]
}

The settings you are after are inlineSourceMap and inlineSources.

This also helps with issues caused by moving the generated .js to different paths and not having to worry about where the map files go.

Solution 3

In ASP.NET 5 RC1 you can instruct the TypeScript compiler to generate .map files by adding a file called tsconfig.json to the project root directory. Visual Studio even has a template for this called "TypeScript JSON Configuration File". By default it has the following contents:

{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5"
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

The "sourceMap" setting instructs the TypeScript compiler to generate the map files which are needed for debugging.

In my case I removed the "wwwroot" value from the "exclude" section because my Angular TypeScript source files are located under wwwroot\App.

Detailed explanation of tsconfig.json settings can be found here: https://github.com/Microsoft/typescript/wiki/tsconfig.json

Solution 4

The simplest way I found is to put all TypeScript files in the wwwroot/app folder and leave the generated js files by Visual Studio to go where they do by default. Using gulp I simply inject them into HTML files. In Visual Studio 2015 it works great, and with gulp tasks I can also easily configure a task to bundle js for production.

Solution 5

When you are using gulp you can write the sourcemaps with a relative directory. This way your TS files are correctly resolved by Visual Studio. I use gulp-typescript and gulp-sourcemaps for my TypeScript compilation.

Below the compilation part of my gulpfile.js file (remember to disable the TypeScript compilation in your project file)

var tsProject = ts.createProject({
    declarationFiles: false,
    noExternalResolve: false,
    target: 'ES5',
    sortOutput: true,
    noEmitOnError: false,
    sourceMap:true
});

gulp.task('script', function () {
    var tsResult = gulp.src('App/Ts/**/*.ts')
            .pipe(sourcemaps.init())
            .pipe(ts(tsProject));
    return tsResult.js.pipe(concat('App.js'))
            .pipe(sourcemaps.write('.', {includeContent:false, sourceRoot: '../../App/Ts/'}))
            .pipe(gulp.dest('wwwroot/js'));
});

(I modified my gulpfile for readability, so check for any compilation / coding errors)

View more solutions

Comments

[David Brower]

Doesn't work me, unfortunately. Or only partly. When I try to put a breakpoint in the .ts file Visual Studio puts it on the same line (by number) in the .js file instead. When I debug the debug cursor moves through the js file and not the ts file.

[citykid]

@David I had troubles configuring this as well. At one point I wrote down any step I do and finally got it working. So I thought I publish the result here above. Sry if it does not work for you. Some years ago my machine (which I had used many years with many VS installs) had several debugger engines configured in the registry and they messed up each other. Thats the only thing I can helpfully say.

[Serj Sagan]

Here's how to debug in Chrome: gamefromscratch.com/post/2014/05/27/…

[Andrei Drynov]

removing the "wwwroot" value was the solution

[Admin]

sounds great but could not understand a word.

[Marcin]

It works so slow anyway that I have disabled that pretty fast. It is possible to debug js with chrome from visual studio but not worth wasting time for setup and use.