【TypeScript】 TSファイルのデバッグを行うには

通常、TypeScriptはJavaScriptへ変換して実行するので、TSファイルそのもののデバックは出来ない。
TypeScriptのコンパイラは "source maps" に対応しているので、Chromeのsource maps機能を
利用すれば、TSファイルそのものもデバックが可能となる。

ただ、個人的には、Visual Studioの内部ブラウザがsource mapsに対応するのを期待したい。。。

1. Visul Studioでsorce mapsファイルの作成
  (1) Web Essentials 2012 のインストール
      以下のサイトから、Web Essentials 2012 をダウンロードし、インストールする。
      http://visualstudiogallery.msdn.microsoft.com/07d54d12-7133-4e15-becb-6f451ea3bea6

  (2) Visual Studio → メニュー → オプション → Web Essentials → TypeScript 
        → Generate Source Map → True

2. Chromeのsorce maps機能を有効化
  (1) Chrome → F12 → 右下のSettings → Sources → Enable source maps にチェック

3. Visul Studio で TypeScriptのデバッグ
  (1) Visul Studioの使用ブラウザをChoromeに変更して、デバッグ実行 

  (2) Chrome → F12 → Sources → TypeScriptソースにブレークポイント設定すればデバッグ実行可能