82

(生成されたJavaScriptをデバッグする代わりに)VisualStudioでTypeScriptソースをデバッグする方法はありますか?

TypeScript言語仕様から:

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

したがって、tsコードにブレークポイントを配置してデバッグできると期待していましたが、機能しません。仕様には、デバッグに関する他の言及は見つかりませんでした。これを機能させるために私がすべきことはありますか?おそらく、「オプションで」という言葉は、それが機能するために何かをする必要があることを示唆しています...何か提案はありますか?

4

6 に答える 6

71

VS2017以降の現在の回答

VS2017以降、VisualStudioでTypescriptを直接デバッグできるようになりました。ドキュメントから:

Visual Studioを使用して、JavaScriptおよびTypeScriptコードをデバッグできます。ブレークポイントの設定とヒット、デバッガーの接続、変数の検査、呼び出しスタックの表示、およびその他のデバッグ機能の使用を行うことができます。

VisualStudioでのTypescript/Asp.NETCoreのデバッグに関する追加のリソースもあります。

VisualStudioCodeでtypescriptをデバッグすることも可能です。

Visual Studio Codeは、組み込みのNode.jsデバッガーと、クライアント側のTypeScriptデバッグをサポートするDebuggerforChromeなどの拡張機能を介して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(または両方)チームのいずれかがソースマップを取得し、それらのサポートも追加することを願っています」で終了します。-これは、まだ発生していないことを示しています。

アップデート:

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コンパイラは公式にソースマップをサポートしています。さらに、Visual Studio 2012用の新しいバージョンのTypeScriptは、ソースマップ形式を使用したデバッグをサポートします。コマンドラインから、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のフル機能のデバッグ。

于 2012-10-03T15:34:09.600 に答える
15

VS2013 Typescriptアプリケーションでは、web.configで何も変更する必要はありませんでした。tsファイルにブレークポイントを設定してIEでデバッグしたところ、TypeScript内でブレークポイントが停止しました。

于 2013-12-11T00:46:19.137 に答える
5

これはVS2017で修正されたため、VisualStudioとtypescriptで直接デバッグできます。

* .tsファイルにブレークポイントを設定するだけで、ヒットします。

また、C#をデバッグしているかのように、IEではなくVSでデバッグします。

于 2016-12-03T05:51:08.100 に答える
3

Visual Studioを使用したtypescriptのデバッグは、適切な設定で機能します。(以前のバージョンのVSでは、問題が発生することがあります。以下は、VS 2015 CTP 6で正常に機能する方法です)

  1. まず、typescriptをjavascriptにコンパイルするときに、必ずソースマップを作成します。したがって、すべてのxxx.jsの近くにxxx.js.mapファイルが必要です。

    Visual Studioの外部でtypescriptコンパイラを実行してソースマップを取得しても、tscコマンドラインで問題は発生しません。

    --sourcemap %1.ts
    

    gulpスクリプトは通常、デフォルトでソースマップを作成します。

  2. VisualStudioでWebアプリケーションを構成します

    InternetExplorerを開始ブラウザとして設定します。IEでのみ動作するようになりましたが、他のブラウザでは動作しないと思います。

    プロジェクトのプロパティで、[Web]タブに移動し、下部にある[デバッガー]セクションを構成します。すべてのデバッガーを無効にします。これは直感に反するものであり、次のエラーメッセージが表示される場合があります。

    デバッガーを起動しようとしましたが、Webプロパティページの現在のデバッグ設定に基づいて、デバッグするプロセスがありません。これは、[ページを開かないでください。別のプロセスからの要求を待つ]オプションが選択されていて、ASP.NETのデバッグが無効になっている場合に発生します。Webプロパティページで設定を確認して、再試行してください。

    エラーメッセージに示されているように、Webプロパティの上部にある[アクションの開始]は、[現在のページ]などの別のオプションである必要があります。

    現在または後でVisualStudio内のtsコードにブレークポイントを設定します。

    F5を押す

Visual Studio Editorを使用してtsファイルをデバッグおよび編集できますが、[編集して続行]は機能しませんが、現在、jsおよびjs.mapファイルを再読み込みして続行できるブラウザーはありません。(私が間違っていれば、誰かを訂正してください。私は幸せになります。)

于 2015-04-06T05:52:20.373 に答える
2

TypeScriptデバッグは、どのマシンのVS2013Update3でもまったく機能しませんでした。多くの不満を感じた後、私はVS2013 Update4CTPに更新してみることにしました。最後に、VSでブレークポイントがヒットしています!

于 2014-10-31T15:55:34.310 に答える
-1

簡単な答え:VisualStudioを再起動します

背景:TypeScriptを使用した2つの異なるプロジェクトを持つ2つのVisualStudio2015インスタンスがありました。最初に開始されたインスタンスは正しくデバッグされませんでしたが、2番目のインスタンスは正しくデバッグされました。プロジェクトの設定はすべて同じでした。私はついに最初のインスタンスを再起動し、それからTypeScriptを(ついに)デバッグしました。

于 2017-02-14T10:16:18.737 に答える