[解決済み] Visual StudioでTypeScriptのコードをデバッグする
質問
Visual StudioでTypeScriptのソースをデバッグする方法はありますか(生成されたjavascriptをデバッグするのではなく)?
TypeScript言語仕様書より。
TypeScriptはオプションでソースマップを提供し、ソースレベルのデバッグを可能にする。
そのため、tsのコードにブレークポイントを置いてデバッグできるようになると思っていたのですが、うまくいきません。仕様書には、デバッグに関する他の言及は見当たりませんでした。何か動作させるために必要なことはあるのでしょうか?おそらく、"optionally"という言葉が、動作するために私が何かをする必要があることを示唆しているのでしょう...。何か提案はありますか?
どのように解決するのですか?
VS2017以降の現在の回答
Visual Studioで直接Typescriptをデバッグすることは、VS2017から可能になりました。より ドキュメント :
Visual Studio を使用して JavaScript と TypeScript のコードをデバッグすることができます。ブレークポイントの設定とヒット、デバッガのアタッチ、変数の検査、コールスタックの表示、その他のデバッグ機能を使用することができます。
また、以下のリソースもあります。 Visual Studio で Typescript / Asp.NET Core をデバッグする .
また、Typescript のデバッグは Visual Studio コード :
<ブロッククオートVisual Studio Code は、内蔵の Node.js デバッガーや、クライアントサイドの TypeScript デバッグをサポートする Debugger for Chrome などの拡張機能を通じて、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 (あるいはその両方) のチームが Source Maps を取り上げ、そのサポートを追加することを期待する、と締めくくっています。
更新しました。
TypeScript 0.8.1 のリリースに伴い、Visual Studio でもソースマップのデバッグが可能になりました。
https://blogs.msdn.com/b/typescript/archive/2012/11/15/announcing-typescript-0-8-1.aspx
発表文より。
<ブロッククオートデバッギング TypeScriptはソースレベルデバッグをサポートするようになりました。 ソースマップ形式 は、JavaScript に翻訳される言語をデバッグする方法として人気を集めてきました。 ソースマップ形式は、JavaScriptに翻訳される言語のデバッグ方法として人気を集めており、様々なブラウザやツールでサポートされています。 ツールでサポートされています。 バージョン0.8.1では、TypeScriptコンパイラがソースマップを正式にサポートしました。 がソースマップをサポートしました。 さらに、TypeScript for Visual Studio 2012の新バージョンでは Visual Studio 2012の新バージョンでは、ソースマップ形式を用いたデバッグがサポートされている。 コマンドラインから、JavaScriptの出力に対応したソースマップファイルを出力する--sourcemapフラグの使用を完全にサポートするようになりました。 このファイルにより、TypeScriptのオリジナルソースをソースマップ形式で直接デバッグすることができます。 このファイルにより、ソースマップ対応のブラウザや Visual Studio でオリジナルの TypeScript ソースを直接デバッグできるようになります。 Studioで直接デバッグできるようになります。 Visual Studioでデバッグを有効にするには、HTML Application with TypeScriptプロジェクトを作成した後に、ドロップダウンから「Debug」を選択します。
更新 :
WebStormはSourceMapを使ったデバッグもサポートするようになりました。 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といった最新の言語を使って、よりスマートで合理的なWeb開発を可能にします。 WebStormは、TypeScript、CoffeeScript、Dartなどのモダンな言語による、よりスマートで合理的なWeb開発を可能にします。 Dartのような現代的な言語による、よりスマートで合理的なWeb開発を可能にします。これらの言語のためのファーストクラスのコードエディタを提供することに加え WebStorm 6は以下を提供します。
これらの高位言語の自動コンパイル/トランスパイルツール サポートされているすべてのプラットフォーム上のブラウザで認識される言語に自動コンパイル/コンパイルします。 TypeScript、Dart、CoffeeScriptのソースマップを使ったフル機能のデバッグ。 ソースマップを使用したフル機能のデバッグ。
関連
-
[解決済み】Visual Studio。プロジェクトに既存のフォルダを追加する
-
[解決済み] ERROR: ソースファイル " " を開くことができません。
-
[解決済み] Visual Studioのデバッグ/ロードが非常に遅い
-
[解決済み] コードのすべてのセクションを折りたたむコマンド?
-
[解決済み] Visual Studioからプロジェクトフォルダの名前を変更するにはどうすればよいですか?
-
[解決済み] Visual Studio CodeとVisual Studioの違いは何ですか?
-
[解決済み] IIS Expressの設定ファイル/メタベースファイルはどこにありますか?
-
[解決済み】TypeScriptのインターフェースと型について
-
[解決済み】Visual Studioでコードを自動フォーマットする方法とは?
-
[解決済み】Visual Studio 2012、2013、2015、VS Codeで正規表現による検索と置換でキャプチャグループを参照する方法
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] "このプロジェクトは、現在のVisual Studioのバージョンと互換性がありません"。
-
[解決済み] ERROR: ソースファイル " " を開くことができません。
-
[解決済み] Visual Studioでデバッグを行う際、特定の環境変数を設定するにはどうすればよいですか?
-
[解決済み] Visual Studio Express 2005はどこでダウンロードできますか?[クローズド]
-
[解決済み] TypeScriptとは何ですか?なぜJavaScriptの代わりにTypeScriptを使うのですか?[クローズド]
-
[解決済み] デバッグビルドのみVisual Studioのポストビルドイベントを実行する方法
-
[解決済み] IIS Expressの設定ファイル/メタベースファイルはどこにありますか?
-
[解決済み】Visual Studio 2012、2013、2015、VS Codeで正規表現による検索と置換でキャプチャグループを参照する方法
-
[解決済み】Visual Studioでファイル名を検索する方法は?
-
[解決済み】Visual Studio Server ExplorerでLocalDBに接続する方法は?