WebStorm 2019.2ヘルプ

TypeScriptの実行とデバッグ

TypeScriptでアプリケーションを作成してから、JavaScriptで記述されたクライアントサイドアプリケーションと同じように実行してデバッグすることができます。

実行またはデバッグする前に、TypeScriptコードをJavaScriptにコンパイルする必要があります。WebStormでは、TypeScriptの検証とJavaScriptへのコンパイルに従って、TypeScriptコンパイラーとの統合により、オンザフライで実行できます。webpack(英語)などの別のツールを使用することもできます。詳細については、TypeScript(英語)公式Webサイトを参照してください。

クライアント側のTypeScriptアプリケーションの実行

WebStormからTypeScriptを実行するための設定は必要ありません。

  1. TypeScriptコードをJavaScriptにコンパイルします

  2. エディターで、生成されたJavaScriptファイルへの参照を含むHTMLファイルを開きます。このHTMLファイルは、必ずしもアプリケーションの開始ページを実装するものである必要はありません。

  3. 以下のいずれか 1 つを実行します:
    • メインメニューから表示 | ブラウザーで開くを選択するか、Alt+F2を押します。次にリストから目的のブラウザを選択します。

    • コードの上にマウスポインタを置くと、ブラウザのアイコンバーが表示されます。the bar with the icons of configured browsers 目的のブラウザを示すアイコンをクリックします。

TypeScriptのデバッグ

ほとんどの場合、外部の開発Webサーバー上で実行されているクライアント側アプリケーションをデバッグすることができます。Node.js を使用しているアプリケーションが内蔵のWebStormサーバー上で実行されている場合は、組み込みサーバーで実行されているJavaScriptと同じ方法でデバッグすることもできます。

WebStormでは、実際に実行されるコンパイル済みJavaScriptの代わりに、元のTypeScriptコードにブレークポイントを設定します。WebStormは、ソースマップ(英語)を使用してTypeScriptのブレークポイントを認識して処理します。

コンパイル時にソースマップを生成するには

tsconfig.json ファイルを開き、sourceMap プロパティーが trueに設定されていることを確認します。

外部Webサーバー上で実行されているTypeScriptアプリケーションをデバッグするには

  1. TypeScriptコードをJavaScriptにコンパイルします(TypeScriptのコンパイルを参照)。ソースマップが生成されていることを確認します。

  2. TypeScriptコードのブレークポイントの設定と設定

  3. 開発モードでアプリケーションを実行します。そのためには npm start を実行する必要があります。開発サーバーの準備が整ったら、ブラウザでアプリケーションが実行されているURLアドレスをコピーします。このURLアドレスを実行/デバッグ構成で指定する必要があります。

  4. メインメニューから実行 | 構成の編集を選択し、ツールバーの the Add button をクリックしてリストからJavaScript デバッグを選択します。表示される実行/デバッグ構成: JavaScript デバッグダイアログで、アプリケーションが実行されているURLアドレスを指定します。このURLは、上記のステップ 3に従って、ブラウザのアドレスバーからコピーできます。

  5. ツールバーの実行/デバッグ構成を選択しますドロップダウンリストで新しく作成した設定を選択し、Debugをクリックします。実行構成で指定されたURLアドレスが、選択されたブラウザで開き、デバッグツールウィンドウが表示されます。

  6. デバッグツールウィンドウで、通常どおり進みます: プログラムをステップ実行し、プログラムの実行を停止して再開し、中断時にそれを調べ実際のHTML DOMを表示します:

最終更新日: 2019年9月12日

関連事項

プロシージャー:

リファレンス:

関連ページ:

TypeScript

WebStormはTypeScriptソースコードの開発、実行、およびデバッグをサポートしています。WebStormは.tsファイルを認識し、あなたからの追加のステップなしで編集するためのコーディング支援のフルレンジを提供します。TypeScriptファイルはアイコンでマークされています。TypeS...

JavaScriptデバッガの設定

JavaScriptコードのデバッグは、Google ChromeおよびChromeファミリの他のブラウザでサポートされています。デバッグが正常に行われるようにするには、組み込みのWebサーバーポートを指定して、WebStormが他のデバッガオプションに示唆しているデフォルト設定を受け入れるだけで十...

ChromeのJavaScriptのデバッグ

WebStormは、Chromeと連携するclient-sideJavaScriptコード用の組み込みデバッガを提供します。以下のビデオと以下の説明は、このデバッガを使い始めるための基本的なステップを示しています。始める前に、JavaScriptデバッガの設定の説明に従って組み込みデバッガーを構成し...

ブレークポイント

ブレークポイントは、特定の時点でプログラムの実行を中断してその動作を調べるためのソースコードマーカーです。一度設定すると、明示的に削除するまでブレークポイントはプロジェクト内に残ります(一時的な行ブレークポイントを除く)。ブレークポイントを含むファイルが外部で変更された場合、たとえば、VCSを介して...

中断されたプログラムを調べる

実行がブレークポイントに到達したとき、またはプログラムを手動で中断したときは、フレームを分析してアプリケーションを調べることができます。フレームはアクティブなメソッドまたは関数呼び出しに対応します。フレームには、呼び出されたメソッドまたは関数のローカル変数、その引数、および式評価を可能にするコードコ...

TypeScript のリファクタリング

リファクタリングは、アプリケーションの動作を変更せずにソースコードを更新することを意味します。リファクタリングはコードを堅牢にし、dryを維持しやすくします。移動リファクタリング:ファイルやフォルダーを移動するだけでなく、WebStormではTypeScriptの最上位シンボルを移動できます。シンボ...