MSDN Blogs: Debugging Typescript in Visual Studio Code and Chrome

After a small adventure in a big data team I'm back in the Reporting Services team.

Everything is new and at the same times some things never change, but I found very quickly that SSRS is building the new portal with recent web technologies such as Angular and Typescript , check out the announcement here

I decided that I want to try to use Visual Studio code for modifying and debugging some of the new great portal features and I wasn't able to find any step by step guide to do it (I found how to debug node.js apps but not just browser apps), so I give it a shot and here are my results

Programs and basic setup

1. Install Node.js https://nodejs.org/en/

2. Install typescript http://www.typescriptlang.org/#Download

3. Install Visual Studio Code https://code.visualstudio.com/

4. Install TypeScript definitions manager http://definitelytyped.org/tsd/

5. Install the chrome debugging extension https://marketplace.visualstudio.com/items/msjsdiag.debugger-for-chrome

The easiest way to do it is to open the command palette (Ctrl+Shift+P) and type install extensions

6. Install typescript definitions for angular

Move to your application directory and execute

C:\Repos\VSCodeDebug> tsdinstallangular--resolve--save

7. Install the nodejs web server

C:\Repos\VSCodeDebug>npminstall-ghttp-server

8. Start the nodejs web server and take note of the http port

C:\Repos\VSCodeDebug>http-server

Running and debugging

You can use your own app or clone my super simple demo app from here https://github.com/jtarquino/VSCodeDebug where I "typescripted" the demo in https://angularjs.org/ for databinding

1. Configure the task runner to compile typescript

Try to build (Ctrl+Shift+B )

it will show that no task runner is configure

 

Click in configure and it will take you to the task.json file

Comment out the Compiles HelloWorld.ts program task runner

Uncomment the second section , so you can use tsconfig.json for the parameters for the compiler

// A task runner that calls the Typescript compiler (tsc) and
// compiles based on a tsconfig.json file that is present in
// the root of the folder open in VSCode

Open tsconfig.json and ensure the sourceMap property is set to true, this will generate the sourceMap files which allows the degugger to map the javascript files with the typescript files

{
"compilerOptions": {
"sourceMap": true
    }
}

2. Setup the debug, press f5 to start the debugging,

First time will ask for the environment pick Chrome

It will open the file launch.json, there are two important elements here the url and the webroot

url should be updated to your start page in my case is index.html

Update the port to use the one that the nodejs http server show when started ,in my case 8080

webroot should be the root of your application, it could be wwwroot or just the current directory, for my case is the current directory which is .  (yes just a dot)

{
"version": "0.2.0",
"configurations": [
        {
"name": "Launch index.html",
"type": "chrome",
"request": "launch",
"file": "index.html"
        },
        {
"name": "Launch localhost with sourcemaps",
"type": "chrome",
"request": "launch",
"url": "http://localhost:8080/index.html",
"sourceMaps": true,
"webRoot": "."
        },
        {
"name": "Attach",
"type": "chrome",
"request": "attach",
"port": 9222
        }
    ]
}

Go to the debug button in VScode and select "Launch Localhost with source maps"

3. Set breakpoints and run

Press f5, it will open Chrome and it will stop at any breakpoint defined by you (for some weird reason you have to click on refresh at least one time before Chrome stops in the breakpoint)

Also important to notice that is debugging in the .ts as expected (instead of the .js that you get out of the box)