[解決済み] Visual StudioでTypeScriptのコードをデバッグする

質問

Visual StudioでTypeScriptのソースをデバッグする方法はありますか（生成されたjavascriptをデバッグするのではなく）？

TypeScript言語仕様書より。

TypeScriptはオプションでソースマップを提供し、ソースレベルのデバッグを可能にする。

そのため、tsのコードにブレークポイントを置いてデバッグできるようになると思っていたのですが、うまくいきません。仕様書には、デバッグに関する他の言及は見当たりませんでした。何か動作させるために必要なことはあるのでしょうか？おそらく、"optionally"という言葉が、動作するために私が何かをする必要があることを示唆しているのでしょう...。何か提案はありますか？

どのように解決するのですか?

VS2017以降の現在の回答

Visual Studioで直接Typescriptをデバッグすることは、VS2017から可能になりました。より ドキュメント :

Visual Studio を使用して JavaScript と TypeScript のコードをデバッグすることができます。ブレークポイントの設定とヒット、デバッガのアタッチ、変数の検査、コールスタックの表示、その他のデバッグ機能を使用することができます。

また、以下のリソースもあります。 Visual Studio で Typescript / Asp.NET Core をデバッグする .

また、Typescript のデバッグは Visual Studio コード :

Visual Studio Code は、内蔵の Node.js デバッガーや、クライアントサイドの TypeScript デバッグをサポートする Debugger for Chrome などの拡張機能を通じて、TypeScript デバッグをサポートしています。

VSの以前のバージョンに対するオリジナルの回答です。

VSではデバッグできないかもしれませんが、いくつかのブラウザでは可能です。Aaron Powell は、ちょうど今日、Chrome Canary でブレークポイントを動作させることについてブログを書きました。 https://www.aaron-powell.com/posts/2012-10-03-typescript-source-maps/ .

Aaron が言っていることを (非常に簡潔に) まとめると、あなたは -sourcemap を生成するためにコンパイラのスイッチを使います。 *.js.map ファイルをソースと同じディレクトリに生成します。をサポートするブラウザでは ソースマップ をサポートしているブラウザ (Chrome Canary や、Mozilla のアイデアなのでおそらく最近の Firefox のビルド) では、このファイルをデバッグすることができます。 .ts ソースを通常の .js ファイルと同じです。

このブログは、Visual Studio または IE (あるいはその両方) のチームが Source Maps を取り上げ、そのサポートを追加することを期待する、と締めくくっています。

更新しました。

TypeScript 0.8.1 のリリースに伴い、Visual Studio でもソースマップのデバッグが可能になりました。

https://blogs.msdn.com/b/typescript/archive/2012/11/15/announcing-typescript-0-8-1.aspx

発表文より。

デバッギング TypeScriptはソースレベルデバッグをサポートするようになりました。 ソースマップ形式 は、JavaScript に翻訳される言語をデバッグする方法として人気を集めてきました。 ソースマップ形式は、JavaScriptに翻訳される言語のデバッグ方法として人気を集めており、様々なブラウザやツールでサポートされています。 ツールでサポートされています。 バージョン0.8.1では、TypeScriptコンパイラがソースマップを正式にサポートしました。 がソースマップをサポートしました。 さらに、TypeScript for Visual Studio 2012の新バージョンでは Visual Studio 2012の新バージョンでは、ソースマップ形式を用いたデバッグがサポートされている。 コマンドラインから、JavaScriptの出力に対応したソースマップファイルを出力する--sourcemapフラグの使用を完全にサポートするようになりました。 このファイルにより、TypeScriptのオリジナルソースをソースマップ形式で直接デバッグすることができます。 このファイルにより、ソースマップ対応のブラウザや Visual Studio でオリジナルの TypeScript ソースを直接デバッグできるようになります。 Studioで直接デバッグできるようになります。 Visual Studioでデバッグを有効にするには、HTML Application with TypeScriptプロジェクトを作成した後に、ドロップダウンから「Debug」を選択します。

更新 :

WebStormはSourceMapを使ったデバッグもサポートするようになりました。 http://blog.jetbrains.com/webide/2013/03/webstorm-6-0-released-adds-typescript-debugging-with-source-maps-fresh-ui-and-much-more/

まず、WebStormは、TypeScriptやCoffeeScriptといった最新の言語を使って、よりスマートで合理的なWeb開発を可能にします。 WebStormは、TypeScript、CoffeeScript、Dartなどのモダンな言語による、よりスマートで合理的なWeb開発を可能にします。 Dartのような現代的な言語による、よりスマートで合理的なWeb開発を可能にします。これらの言語のためのファーストクラスのコードエディタを提供することに加え WebStorm 6は以下を提供します。

これらの高位言語の自動コンパイル/トランスパイルツール サポートされているすべてのプラットフォーム上のブラウザで認識される言語に自動コンパイル/コンパイルします。 TypeScript、Dart、CoffeeScriptのソースマップを使ったフル機能のデバッグ。 ソースマップを使用したフル機能のデバッグ。