TypeScript の実行とデバッグ

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

2. ソースマップの生成を有効にするには、tsconfig.json ファイルを作成するに従って、tsconfig.json を開き、sourceMap プロパティを true に設定します。

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

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

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

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

5. 実行 | 実行構成の編集に進みます。あるいは、ツールバーのリストから実行構成の編集を選択します。

   

   開いた実行構成の編集ダイアログで、ツールバーの追加ボタン () をクリックし、リストから JavaScript デバッグを選択します。開いた実行 / デバッグ構成: JavaScript デバッグダイアログで、アプリケーションが実行されている URL アドレスを指定します。この URL は、上記のステップ 3 に従って、ブラウザーのアドレスバーからコピーできます。

   

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

   デバッグツールウィンドウでコントロールを使用できるようにするには、ブラウザーでページをリフレッシュする必要がある場合があります。

7. デバッグツールウィンドウで、通常どおりに処理を進めます。プログラムをステップ実行し、プログラムの実行を停止して再開し、中断されたときにプログラムを調べ、実際の HTML DOM を表示し、コンソールで JavaScript コードスニペットを実行します。

1. お使いのコンピューターに Node.js(英語) がインストールされていることを確認してください。

2. 設定で Node.js プラグインが有効になっていることを確認します。Ctrl+Alt+S を押して設定を開き、プラグインを選択します。インストール済みタブをクリックします。検索フィールドに Node.js と入力します。プラグインの詳細については、プラグインのマッピングを参照してください。

3. ソースマップの生成を有効にするには、tsconfig.json ファイルを作成するに従って、tsconfig.json を開き、sourceMap プロパティを true に設定します。

1. 実行 | 実行構成の編集に進みます。あるいは、ツールバーのリストから実行構成の編集を選択します。

   

   開いた実行構成の編集ダイアログで、ツールバーの追加ボタン () をクリックし、リストから Node.js を選択します。

2. 開いた実行 / デバッグ構成: Node.js ダイアログで、使用する Node.js インタープリターを指定します。

   JavaScript ファイルフィールドで、それを開始するアプリケーションのメインファイルから生成されたコンパイル済みファイルを指定します。

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

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

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

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

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

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

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

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

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

• 埋め込まれたターミナル（Alt+F12）で、次のように入力します。

  npm install --save-dev ts-node

1. 実行 | 実行構成の編集に進みます。あるいは、ツールバーのリストから実行構成の編集を選択します。

   

   開いた実行構成の編集ダイアログで、ツールバーの追加ボタン () をクリックし、リストから Node.js を選択します。実行 / デバッグ構成: Node.js ダイアログが開きます。

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

3. 使用する Node.js インタープリターを指定します。

   プロジェクトエイリアスを選択すると、JetBrains Rider は Node.js ページの Node インタープリターフィールドからプロジェクトの既定のインタープリターを自動的に使用します。ほとんどの場合、JetBrains Rider はプロジェクトの既定のインタープリターを検出し、フィールド自体に入力します。

   別の構成済みのローカルインタープリターまたはリモートインタープリターを選択するか、 をクリックして新しいインタープリターを構成することもできます。

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

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

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

5. 必要に応じて、アプリケーションパラメーターフィールドに ts-node の追加パラメーター ( --project tsconfig.json など) を指定します。

6. 設定を保存します。

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

• ファイル名を明示的に入力した場合は、ツールバーのリストから必要な構成を選択し、リストの横にある をクリックするか、Shift+F10 を押します。

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

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

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

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

   • ファイル名を明示的に入力した場合は、ツールバーのリストから必要な構成を選択し、リストの横にある をクリックするか、Shift+F9 を押します。

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