web-dev-qa-db-ja.com

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

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

TypeScript言語仕様から:

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

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

79
M.S

VS 2017の時点で更新:

VS2017は、c#をデバッグする場合と同様に、Visual StudioでTypeScriptを直接デバッグするようになりました。以下の私の答えを参照してください。

VSの以前のバージョンの元の回答:

VSではデバッグできない場合がありますが、一部のブラウザーではデバッグできます。 Aaron Powellは、Chrome今日のカナリアでブレークポイントを取得することについてブログに書いています: 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のリリースにより、Visual Studioでソースマップデバッグも利用できるようになりました。

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

70
Jude Fisher

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

14
BraveNewMath

これはVS 2017で修正されたため、Visual StudioとTypeScriptで直接デバッグできます。

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

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

5
Greg Gum

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. Visual StudioでWebアプリケーションを構成する

    ブラウザの起動としてInternet Explorerを設定します。 IEでのみ動作し、他のブラウザが動作するとは思わない。

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

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

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

    Visual Studio内のtsコードでbreakpointsを今または後で設定します。

    ヒットF5

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

3
citykid

TypeScriptデバッグは、VS2013 Update 3のどのマシンでもまったく機能しませんでした。かなりのフラストレーションの後、VS2013 Update 4 CTPへの更新を試みることにしました。最後に、VSでブレークポイントがヒットしています!

2
user1599328

短い答え:Visual Studioを再起動します

背景:TypeScriptを使用した2つの異なるプロジェクトを含む2つのVisual Studio 2015インスタンスがありました。最初に開始されたインスタンスは正しくデバッグされず、2番目のインスタンスは正しくデバッグされました。プロジェクト設定はすべて同じでした。最終的に最初のインスタンスを再起動し、(最終的に)TypeScriptをデバッグしました。

0
klaasjan69