Visual Studio で TypeScript ソースをデバッグする方法はありますか (生成された JavaScript をデバッグする代わりに)?
TypeScript 言語仕様より:
TypeScript はオプションでソースマップを提供し、ソースレベルのデバッグを可能にします。
したがって、ts コードにブレークポイントを配置してデバッグできると期待していましたが、うまくいきませんでした。仕様書にはデバッグに関する他の記述は見つかりませんでした。これを機能させるために何かすべきことはありますか? おそらく、「オプション」という言葉は、これを機能させるために何かする必要があることを示唆しているのでしょう... 何か提案はありますか?
ベストアンサー1
VS2017以降の現在の回答
VS2017以降では、Visual StudioでTypescriptを直接デバッグできるようになりました。ドキュメンテーション:
Visual Studio を使用して JavaScript および TypeScript コードをデバッグできます。ブレークポイントを設定してヒットしたり、デバッガーをアタッチしたり、変数を検査したり、呼び出しスタックを表示したり、その他のデバッグ機能を使用したりすることができます。
追加のリソースもありますVisual Studio での Typescript / Asp.NET Core のデバッグ。
TypeScriptをデバッグすることも可能ですビジュアルスタジオコード:
Visual Studio Code は、組み込みの Node.js デバッガーを通じて TypeScript デバッグをサポートし、また、クライアント側の TypeScript デバッグをサポートする Chrome 用デバッガーなどの拡張機能を通じて TypeScript デバッグをサポートします。
VS の以前のバージョンに対する元の回答:
VS ではデバッグできないかもしれませんが、一部のブラウザでは可能です。Aaron Powell は今日、Chrome Canary でブレークポイントを機能させる方法についてブログに投稿しました。https://www.aaron-powell.com/posts/2012-10-03-typescript-source-maps/。
アーロンの言うことを（非常に簡単に）まとめると、-sourcemapコンパイラのスイッチを使用して*.js.mapソースと同じディレクトリにファイルを生成します。ソースマップ(Chrome Canary、およびおそらく最近の Firefox ビルド (Mozilla のアイデアであるため))、通常のファイル.tsと同じようにソースをデバッグできます。.js
ブログは「Visual Studio または IE (あるいはその両方) のチームがソースマップを採用し、それらのサポートも追加してくれることを期待します」で終わりますが、これはまだ実現していないことを示唆しています。
アップデート：
TypeScript 0.8.1 のリリースにより、ソース マップのデバッグが Visual Studio でも利用できるようになりました。
https://blogs.msdn.com/b/typescript/archive/2012/11/15/announcing-typescript-0-8-1.aspx
発表より:
デバッグTypeScript は、ソース レベルのデバッグをサポートするようになりました。ソース マップ形式は、JavaScript に変換される言語をデバッグする方法として人気が高まっており、さまざまなブラウザーやツールでサポートされています。バージョン 0.8.1 では、TypeScript コンパイラーがソース マップを正式にサポートしています。さらに、Visual Studio 2012 用の TypeScript の新しいバージョンでは、ソース マップ形式を使用したデバッグがサポートされています。コマンド ラインからは、JavaScript 出力に対応するソース マップ ファイルを出力する --sourcemap フラグの使用が完全にサポートされるようになりました。このファイルを使用すると、ソース マップ対応のブラウザーや Visual Studio で元の TypeScript ソースを直接デバッグできます。Visual Studio でデバッグを有効にするには、TypeScript プロジェクトを含む HTML アプリケーションを作成した後、ドロップダウンから [デバッグ] を選択します。
アップデート:
WebStorm では、SourceMaps によるデバッグのサポートも追加されました。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、Dart などの最新言語を使用して、よりスマートで効率的な Web 開発が可能になります。これらの言語用のファーストクラスのコード エディターを提供することに加えて、WebStorm 6 では次の機能が提供されます。
これらの高水準言語を、サポートされているすべてのプラットフォームのブラウザーで認識される言語に自動的にコンパイル/トランスパイルします。ソースマップを使用した TypeScript、Dart、または CoffeeScript のフル機能のデバッグ。