Thursday, November 7, 2013

TypeScript Debugging

Any programming language is not complete without good debugging capability. Remember the hours you spent trying to identify where the problem is. Debugging is particularly hard in JavaScript world as the tools are still emerging.

For transcompilers likes TypeScript debugging will be much harder without proper tools. The typescript you wrote will be converted to javascript and you may have to debug the javascript and not the typescript you wrote. Imagine how hard it will be to debug the code you haven’t written. Fortunately typescript provides a very good debugging tool which helps you to debug the code as you wrote in typescript and not to worry about the generated javascript.

TypeScript provides this debugging capability with the help of source maps. Source map is file used by browsers to map the javascript code with its original source code. Whenever you save the typescript file a source map file is automatically generated by the Visual Studio.

The actual debugging is similar to debugging the C# or VB code. Just put a break point and run the application using Internet Explorer. By default Internet Explorer recognizes the source maps.

When the debug point was hit the Visual Studio helps you step through the code as shown below

The debugger helps you exam variables, look at call stack and provide other features you typically use while debugging.

TypeScript provides very good tooling which helps easy adoptability. Debugging is one of those great tools.

Please go to my TypeScript blog series for other blogs in TypeScript.

No comments:

Post a Comment