WebStorm 2019.3ヘルプ

TypeScriptの実行とデバッグ

WebStormを使用すると、Node.jsで実行されているクライアント側のTypeScriptコードとTypeScriptコードを実行およびデバッグできます。

アプリケーションを実行またはデバッグする前に、TypeScriptコードをJavaScriptにコンパイルする必要があります。これは、ビルトインTypeScriptコンパイラーと、Node.jsでTypeScriptを実行するためのts-node(英語)など、他のツールを使用して実行できます。これは、個別に、またはビルドプロセスの一部として使用されます。

コンパイル中に、TypeScriptコードと実際に実行されるJavaScriptコードとの対応を設定するソースマップ(英語)を生成することもできます。その結果、TypeScriptコードにブレークポイントを設定し、タイプJavaScript デバッグ(クライアント側コードの場合)またはNode.jsの実行/デバッグ構成でアプリケーションを起動し、生成されたソースマップのおかげで元のTypeScriptコードをステップスルーできます。

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

TypeScriptでクライアントサイドアプリケーションを記述し、TypeScriptをJavaScriptにコンパイルするに従ってコードをコンパイルし、JavaScriptで記述されたクライアントサイドアプリケーションとまったく同じ方法でアプリケーションを実行およびデバッグできます。唯一の違いは、TypeScriptコードにブレークポイントを直接設定できることです。

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

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

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

    • コードの上にマウスポインターを移動して、ブラウザーアイコンバーを表示します。Firefox Chrome Safari Internet Explorer Opera 目的のブラウザーを示すアイコンをクリックします。

クライアント側TypeScriptアプリケーションのデバッグ

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

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

  1. JavaScriptデバッガーの構成の説明に従って、組み込みデバッガーを構成します。

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

  3. 開発モードでアプリケーションを実行します。多くの場合、npm start を実行する必要があります。

    ほとんどの場合、この段階でTypeScriptはJavaScriptにコンパイルされ、ソースマップが生成されます。詳細については、TypeScriptをJavaScriptにコンパイルするを参照してください。

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

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

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

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

Node.jsを使用したサーバー側TypeScriptアプリケーションの実行とデバッグ

WebStormを使用すると、Node.js実行構成を介してNode.jsでサーバー側のTypeScriptコードを起動できます。TypeScriptをJavaScriptにコンパイルするに従って、実行またはデバッグする前に、TypeScriptコードをJavaScriptにコンパイルする必要があります。

Node.jsでサーバー側TypeScriptを実行する

  1. TypeScriptコードをJavaScriptにコンパイルします。詳細については、TypeScriptをJavaScriptにコンパイルするを参照してください。

  2. Node.js実行/デバッグ構成を作成します。

    1. メインメニューから実行 | 構成の編集を選択し、次に構成の編集ダイアログでツールバーの the Add button をクリックし、リストからNode.jsを選択します。

    2. 開いた実行/デバッグ構成:Node.jsダイアログで、使用するNode.jsインタープリターを指定します。JavaScript ファイルフィールドで、それを起動するアプリケーションのメインファイルから生成されたコンパイル済みファイルを指定します。

    Node.jsの実行/デバッグ設定の作成の詳細を参照してください。

  3. ツールバーの実行/デバッグ構成を選択しますリストから新しく作成したNode.js設定を選択し、その隣にある Run をクリックします。

Node.jsを使用してサーバー側TypeScriptをデバッグする

  1. TypeScriptコードをJavaScriptにコンパイルします。詳細については、TypeScriptをJavaScriptにコンパイルするを参照してください。

  2. 必要に応じて、TypeScriptコードにブレークポイントを設定します。

  3. 上記のように Node.jsの実行/デバッグ構成を作成します。

  4. ツールバーの実行/デバッグ構成を選択しますリストから新しく作成したNode.js設定を選択し、その隣にある the Debug button をクリックします。デバッグツールウィンドウが開きます。

  5. ブレークポイントでコードの実行をトリガする手順を実行します。

  6. WebStormに切り替えると、デバッグツールウィンドウのコントロールが有効になります。

ts-nodeを使用する

Node.jsで単一のTypeScriptファイルを実行またはデバッグする必要がある場合は、TypeScriptをJavaScriptにコンパイルするに従ってコードをコンパイルする代わりにts-node(英語)を使用できます。

ts-nodeをインストールする

  • 埋め込みターミナルAlt+F12)に次のように入力します。

    npm install --save-dev ts-node

ts-nodeのカスタムNode.js実行/デバッグ構成を作成する

  1. メインメニューから実行 | 構成の編集を選択し、次に構成の編集ダイアログでツールバーの the Add button をクリックしてリストからNode.jsを選択します。実行/デバッグ構成:Node.jsダイアログが開きます。

  2. Node パラメーターフィールドに --require ts-node/registerを追加します。

  3. 使用するNode.jsインタープリターを指定してください。これはローカルNode.jsインタープリターまたはWindows Subsystem for LinuxのNode.jsです。

  4. JavaScript ファイルフィールドで、実行またはデバッグするファイルを指定します。ワークフローに応じて、明示的にまたはマクロを使用してそれを行うことができます。

    • 常に同じTypeScriptファイルを起動する場合は、the Browse button をクリックして、表示されるダイアログでこのファイルを選択します。デフォルトでは、実行/デバッグ構成は選択したファイルの名前を取得します。

    • 別のファイルを起動する必要がある場合は、$FilePathRelativeToProjectRoot$と入力します。このマクロを使用すると、WebStormは常にアクティブなエディタータブでファイルを起動します。

  5. オプション

    ts-nodeに追加パラメーター(たとえば、--project tsconfig.json)を渡すには、アプリケーション・パラメーターフィールドに追加します。

  6. 設定を保存します。

TypeScriptファイルを実行する

実行/デバッグ構成でTypeScriptファイルを指定した方法に応じて、次のいずれかを実行します。

  • ファイル名を明示的に入力した場合は、プロジェクトツールウィンドウでファイルを選択するか、エディターで開いてから実行<実行/デバッグ構成>を選択します。

    または、ツールバーのリストから必要な構成を選択し、リストの横にある the Run button をクリックするか、Shift+F10を押します。

  • マクロを指定した場合は、エディターでTypeScriptファイルを開き、ツールバーのリストから新しく作成された構成を選択し、the Run button をクリックするか、Shift+F10を押します。

WebStormは、実行ツールウィンドウに出力を表示します。

TypeScriptファイルをデバッグする

  1. デバッグするTypeScriptファイルで、必要に応じてブレークポイントを設定します。

  2. 実行/デバッグ構成でTypeScriptファイルを指定した方法に応じて、次のいずれかを実行します。

    • ファイル名を明示的に入力した場合は、プロジェクトツールウィンドウでファイルを選択するか、エディターで開いてからデバッグ<実行/デバッグ構成>を選択します。

      または、ツールバーのリストから必要な構成を選択し、リストの横にある the Debug button をクリックするか、Shift+F9を押します。

    • マクロを指定した場合は、エディターでTypeScriptファイルを開き、ツールバーのリストから新しく作成した構成を選択し、リストの横にある the Debug button をクリックするか、Shift+F9を押します。

最終更新日: 2020年1月15日

関連ページ:

TypeScriptをJavaScriptにコンパイルする

ブラウザーとNode.jsはJavaScriptのみを処理するため、TypeScriptコードを実行またはデバッグする前にコンパイルする必要があります。コンパイルにより、TypeScriptコードと実際に実行されるJavaScriptコードとの対応を設定するソースマップも作成できます。WebStor...

ChromeでのJavaScriptのデバッグ

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

ブレークポイント

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

プログラムのステップ・スルー

ステップは、プログラムの段階的な実行を制御するプロセスです。WebStormは、戦略に応じて使用される一連のステップアクションを提供します(たとえば、次の行に直接移動するか、途中で呼び出されたメソッドを入力する必要があるかなど)。ステップボタンは、デバッグツールウィンドウのツールバーにあります。ステ...

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

デバッガーセッションが開始されると、デバッグツールウィンドウが表示され、次のいずれかが発生するまでプログラムが正常に実行されます。ブレークポイントにヒット、手動でプログラムを一時停止する、その後、プログラムは中断され、現在の状態を調べたり、実行を制御したり、実行時にさまざまなシナリオをテストしたりで...

Node.jsの実行とデバッグ

WebStormは、Node.jsアプリケーションの実行とデバッグを支援します。WebStormから起動し、既に実行中のアプリケーションにアタッチするアプリケーションをデバッグできます。始める前に、プラグインのページでNodeJSバンドルプラグインが有効になっていることを確認してください。詳細につい...