VS2017以降の現在の回答
VS2017以降、VisualStudioでTypescriptを直接デバッグできるようになりました。ドキュメントから:
Visual Studioを使用して、JavaScriptおよびTypeScriptコードをデバッグできます。ブレークポイントの設定とヒット、デバッガーのアタッチ、変数の検査、呼び出しスタックの表示、およびその他のデバッグ機能の使用を行うことができます。
VisualStudioでのTypescript / Asp.NETCoreのデバッグに関する追加のリソースもあります。
Visual StudioCodeでtypescriptをデバッグすることも可能です。
Visual Studio Codeは、組み込みのNode.jsデバッガーと、クライアント側のTypeScriptデバッグをサポートするDebugger forChromeなどの拡張機能を介してTypeScriptデバッグをサポートします。
VSの以前のバージョンの元の回答:
VSでデバッグできない場合がありますが、一部のブラウザーではデバッグできます。Aaron Powellが、ChromeCanaryでブレークポイントを機能させることについてブログに書いています:https://www.aaron-powell.com/posts/2012-10-03-typescript-source-maps/。
アーロンの言うことを(非常に簡単に)要約-sourcemap
すると、コンパイラのスイッチを使用し*.js.map
て、ソースと同じディレクトリにファイルを生成します。ソースマップをサポートするブラウザ(Chrome Canary、およびMozillaのアイデアであるため、おそらく最近のFirefoxビルド)では、.ts
通常の.js
ファイルと同じようにソースをデバッグできます。
ブログは、「Visual StudioまたはIE(または両方)チームのいずれかがソースマップを取得し、それらのサポートも追加することを願っています」で終了します。-これは、まだ発生していないことを示しています。
更新:
TypeScript 0.8.1のリリースにより、ソースマップのデバッグがVisualStudioでも利用できるようになりました。
https://blogs.msdn.com/b/typescript/archive/2012/11/15/announcing-typescript-0-8-1.aspx
発表から:
デバッグ
TypeScriptはソースレベルのデバッグをサポートするようになりました!ソースマップ形式は、JavaScriptに翻訳され、さまざまなブラウザやツールでサポートされている言語をデバッグする方法として人気が高まっています。バージョン0.8.1では、TypeScriptコンパイラは公式にソースマップをサポートしています。さらに、新しいバージョンのTypeScript for Visual Studio 2012は、ソースマップ形式を使用したデバッグをサポートしています。コマンドラインから、JavaScript出力に対応するソースマップファイルを出力する--sourcemapフラグの使用を完全にサポートするようになりました。このファイルを使用すると、ソースマップが有効なブラウザーとVisualStudioで元の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-そして-はるかに/
まず、WebStormは、TypeScript、CoffeeScript、Dartなどの最新言語を使用したよりスマートで合理化されたWeb開発を可能にします。これらの言語用のファーストクラスのコードエディタを提供することに加えて、WebStorm6は以下を提供します。
サポートされているすべてのプラットフォームのブラウザで認識される言語へのこれらの高級言語の自動コンパイル/変換。ソースマップを使用したTypeScript、Dart、またはCoffeeScriptのフル機能のデバッグ。