VisualStudioを使用したTypeScriptコードのデバッグ


81

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

TypeScript言語仕様から:

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

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


回答:


71

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のフル機能のデバッグ。


4
Chrome Canaryは本当に必要ですか?Chromeで安定していますが、開発者ツールの設定ウィンドウに[ソースマップを有効にする]オプションが表示されます。
Judah Gabriel Himango 2012年

1
アーロンがブログを書いたとき(そして私がこの回答を投稿したとき)、カナリアが必要だったと思います。これまでに、機能はリリースまで浸透している必要があります。
ジュードフィッシャー

4
現在、Internet Explorerを使用している場合、Visual StudioGUIでTypeScriptを直接デバッグできるようです。これは他のブラウザでも実現できるのではないかと思います。
kossmoboleat 2012年

VS 2012でTSをデバッグできません
Nikos


15

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


同意する。私はVS 2013の更新2.使用しています
ナッシュ

2
IEをご指摘いただきありがとうございます。残念ながら、Chromeではデバッグが機能していません。
Ivan Kochurkin 2014

4
私の推測では、Microsoftはいくつかのフックを活用して、他のブラウザがまだサポートしていないデバッグプロセスを機能させるようにしています。ブラウザで生成されたJavaScriptとIDEのソースコードの間のコントラクトのような中間コードマッピングファイルがあります。私はそれがまったく機能することを嬉しく思います。
BraveNewMath 2014

5

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

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

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


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プロパティの上部にある[アクションの開始]は、[現在のページ]などの別のオプションである必要があります。

    セットブレークポイントVisual Studioの中にあなたのtsコードで今以降。

    ヒットF5

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


4月以降、セットアップに変更はありますか?
jth41 2015

記事は役に立ちましたか?
citykid 2015

2

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


アップデート4ctpのthxがヘッドアップし、インストールします。私のマシンにはUpdate3があり、typescriptデバッグが機能します。ただし、Webアプリケーションがコンパイルされるたびに(tsコードのみを変更したにもかかわらず)、ieの起動には特に長い時間がかかります
citykid 2014年

0

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

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

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.