Support Typescript Debugging in VS2017 and Chrome

Issue #555 closed
Brian Lewis repo owner created an issue

VS 2017 - as well as Chrome developer pages - supports debugging of typescript code via map files. To use this feature in either platform, these changes are required:

-- generate map files from typescript compilation

The map file associates positions in the javascript file with corresponding locations in the source typescript files

-- create js file from compiler without concatenation

In the current setup, various js files are concatenated with the output from the typescript compilation to make the final executable. This means that the map file address get displaced. To overcome this, we must add the js files into the typescript compilation, using AllowJs option in tsconfig.json.

-- Upgrade to grunt-ts 5.5

Grunt-ts manages the typescript compilation within the grunt file. Current version of grunt-ts in use does not support AllowJs option.

-- Remove concatenate of javascripts in grunt build process

Instead, compile directly into ./dist/scripts/app, so that .js and .map.js are both there

-- remove javascript

Identify the javascript files that are genuinely required, and include these in tsconfig.json as part of the build. Other files can be removed.

Comments (4)

  1. Brian Lewis reporter

    To use typescript debugging in Visual Studio, the option Enable Javascript debugging for ASP.NET must be selected: Capture.PNG

    In Chrome, you have to you use FileSystem option in the Sources page to allow access to the source code directory pineapples.client/src

    Chrome is possibly a more efective option becuase:

    -- VS does not correctly interpret this in the typescript ( ie inside a lambda function), Chrome does -- it can be more practical to have client side debugging and server side debugging in separate windows on separate screens.

    Capture.PNG

  2. Log in to comment