Debug With TypeScript 0.8.1 | John Papa

John Papa

Evangelist on the loose

Debug With TypeScript 0.8.1

...

TypeScript 0.8.1 was just released and it now supports debugging right inside Visual Studio! You can read more about TypeScript and its latest changes in this post by Luke Hoban, PM of the TypeScript team and you can download TypeScript from here.

TypeScript is a super set of JavaScript and brings optional static typing and other features like classes to the picture.

You can learn more about TypeScript in my upcoming course which I am co-authoring with Dan Wahlin for Plrualsight (coming later this year!).

Update (11/22/2012)

I was having some difficulty getting the debugging to work, so I thought I might share what I found after talking to the TypeScript team (great guys, BTW). There are a few requirements to get debugging to work:

  • Visual Studio 2012
  • TypeScript 0.8.1
  • Internet Explorer 9 or 10

Also, some earlier versions of Web Essentials 2012 may interfere with the TypeScript debugging. The good news is that Mads (program manager for Web Essentials) has quickly updated it and there is now a version that works great with TypeScript 0.8.1. I have had much success using Web Essentials 2012 version 1.8.8.1. I’ve also been able to debug TypeScript 0.8.1 code when no Web Essentials was installed.

The best news is that the  TypeScript team and the Web Essentials teams mentioned to me that they will try to synch releases moving forward.

Happy debugging!

tags: javascript typescript
  • Dinko

    Hi,
    just tried new version with Visual Studio 2012 ( sample project created when creating the new C# HTML with Typescript project ) … not working.

    I’m hitting F5, build starts and local IIS starts, studio goes to debug mode/layout and stops there. Step into, step over menu commands are greyed out. Only pause and stop are available.

    Am I doing something wrong, is there some other procedure for debugging?
    Forgot to mention … Source map is generated also and works in Chrome debugger.

    Thanks in advance,
    Dinko

    • John

      Dinko,

      I’m seeing spotty behavior myself. Hopefully I can get some answers on what’s going on and why debugging is not working properly. Hopefully its something simple.

  • Pingback: The Morning Brew - Chris Alcock » The Morning Brew #1234

  • João Paulo Menezes (@JPMenez)

    I was using Google Chrome and breakpoints weren’t working. Tried with Internet Explorer 10 and everything is working fine now.

  • evan larsen

    its buggy for me too. I found that If I clean solution and set the web essentials to ‘build all TS files on build’ and then do a build.. it will work.

    This is not ideal though.. I usually turn the ‘build all TS files on build’ option off because it is bloating my source control.

    • John

      Hi Evan,

      I’ve had a lot more success with it since the newest Web Essentials 1.9+ came out and TypeScript revision. Works much better now and more consistently. I also turn off the feature to compile JS on build, as it interferes with debugging IME.

  • Pingback: Upgrade TypeScript project from 0.8.0 to version 0.8.1.1 | Cyan By Fuchsia

  • Pingback: New TypeScript Fundamentals Course | John Papa

  • Pingback: Getting Started with TypeScript Now and A New Course Coming Soon! | the pluralsight blog

  • Guillaume

    Is it supposed to work for Win8 apps ? I tryed on the app in the samples and can’t get the debugging to work (I have enabled sourcemap generation in webessentials but it does not change anything)

  • Pingback: TypeScript, breve resumen e información a tener en cuenta! - Jersson on Geeks·ms

  • Pingback: TypeScript, breve resumen e información a tener en cuenta! | Jersson on the block!

  • Zenon Iwanicki

    Hi All
    I’ve created TypeScriptHtmlApp1 project. I’ve created on breakpoint on this line in app.ts file

    window.onload = () => {
    var el = document.getElementById(‘content’);
    var greeter = new Greeter(el);
    greeter.start();
    };

    Error info:
    [This breakpoint will not currently be hit. No symbols have been loaded for this document]

    I’ve got the latest updates of visual studio and web essentials
    Microsoft Visual Studio Premium 2013
    Version 12.0.30723.00 Update 3
    Microsoft .NET Framework
    Version 4.5.51641

    part of app.js.map file
    {“version”:3,”file”:”app.js”,”sourceRoot”:””,”sources”:[“app.ts”],”names”:[“Greeter”,”Greeter.constructor”,”Greeter.start”,”Greeter.stop”],”mappings”

    end of the app.js
    //# sourceMappingURL=app.js.map

    Here is project configuration

    false
    true
    commonjs
    C:UsersZenonDocumentsVisual Studio 2013ProjectsTypeScriptHTMLApp1TypeScriptHTMLApp1

    true
    false

    Installed Version: Premium

    Anny idea what is wrong.
    Regards
    Zenon
    zenoniwanicki@hotmail.com

%d bloggers like this: