Windows 10 Universal JavaScript Debugging TypeScript

Overall, still loving the new Windows 10 Universal Platform JavaScript apps.  Feels just like building for the web.  The one big difference I'm noticing now is that debugging is actually easier in web pages.  How is this possible?

In the browser, when things go wrong, you hit F12 and you're off to the races.  Right click, inspect anything on the page, execute scripts in the console, hover over scripts (including TypeScript) and see the property value, etc.  All good stuff, especially the fact that I can debug my typescript files.  I do not need to work with the generated javascript and figure out what that was in the typescript.

In universal apps, it's closer to traditional development with visual studio where you can set breakpoints and view watch window or locals.  I will say that breakpoints work better in studio than in the browser generally as you can more easily set breakpoints on inline lambda functions that I have not figured out how to do in the browser.

Eg,

this.controller.fetchData().then((result) => [breakpoint] this.storeResult(result));

Breaking into the lambda as written here is difficult in the browser, I would normally have to convert the statement to:

this.controller.fetchData().then((result) => {

    [breakpoint] return this.storeResult(result);

});

so that the function body has a line number which to set the break.

However, the horrible downside to the windows universal stuff is that in the debugger, if you are working on typescript, it will tell you everything is undefined.  Why?  Because of JavaScript's scoping for the this keyword.  In the generated code, you'll find _this is the reference you'll need to work with the object in the console.

Also, I cannot find anyway to 'inspect' the output in the simulator so that finding elements in the page to modify is definitely more difficult.  You do get all the nice features of being able to edit style sheets or markup, but when you modify TypeScript files, it doesn't actually use the modifications!  This can be terribly confusing as the debugger will walk the script with the change, but just not use the modified code.  This may not be true if you directly modify the javascript (haven't tried), but you definitely have to restart the app for type script changes to take hold; which honestly is OK since the TS is compiled during the build, however, it should not give the appearance of being modified and running the modified code.  Simply disallow it or give some grayed out indicator that the code is not actually being used.

Hopefully the 'this' scoping will be fixed soon and a way to inspect would make the development experience better than web development.