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(英語) 18 以上がインストールされていることを確認してください。

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

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

  npm install --save-dev ts-node

1. 実行 | 実行構成の編集に移動します。または、ツールバーの実行ウィジェットから実行構成の編集を選択します。

   

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

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

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

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

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

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

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

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

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

6. 設定を保存します。

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

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

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

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

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

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

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

   • マクロを指定した場合は、エディターでデバッグする TypeScript ファイルを開き、実行ウィジェットから新しく作成された構成を選択して、 をクリックするか、Shift+F9 を押します。