実行ツールウィンドウ
実行ツールウィンドウには、アプリケーションによって生成された出力が表示されます。各タブの外観は、実行中のアプリケーションの種類によって異なり、追加のツールボックスとペインを含めることができます。
Vue.js アプリケーションをデバッグする、Angular アプリケーションをデバッグする、Vite アプリケーションをデバッグする、React アプリケーションをデバッグするから詳細を学びます。
ツールウィンドウのタブ
タブをピン留め
複数のアプリケーションを実行している場合、各アプリケーションは、適用された実行 / デバッグ構成にちなんで名付けられたタブに表示されます。アプリケーションを再実行しても出力を保持するには、出力タブを固定します。
タブを右クリックし、タブをピン留めを選択します。
デフォルトでタブを固定するには、Ctrl+Alt+S を押して IDE 設定を開き、詳細設定を選択してデフォルトで構成をピン留めするオプションを有効にします。
タブを分割する
PhpStorm を使用すると、アクティブな実行ツールウィンドウを垂直または水平に分割できます。
ツールウィンドウで目的のタブを右クリックし、分割オプションのいずれかを選択します: 分割して右に移動または分割して下に移動。
これを行う別の方法は、目的のタブをドラッグアンドドロップすることです。PhpStorm は、タブを配置できるツールウィンドウの使用可能な領域をハイライトします。
ツールウィンドウの分割を解除するには、上部ペインを右クリックし、コンテキストメニューから分割しないを選択します。
実行ツールバー
実行ツールウィンドウのメインツールバーを使用すると、アプリケーションを再実行、停止、一時停止、または終了できます。
項目 | ツールチップとショートカット | 説明 |
|---|---|---|
| 再実行 Ctrl+F5 | 現在のアプリケーションを停止してもう一度実行するには、このボタンをクリックします。 |
| 自動的に再実行 | このアイコンを使用して、自動テストのようなランナーを有効にします。関連するソースコードを変更すると、現在の実行構成内のテストが自動的に再開されます。 Maven プロジェクトの場合、このアイコンをクリックしてソースコード (Java または POM ファイル内) を変更すると、現在実行中のゴールが変更のたびに自動的に再実行されます。 |
| 指定されたモジュールからビルドを再開 | エラーを修正した後、ビルドを続行するには、このアイコンをクリックします。大規模な複数モジュールのプロジェクトに役立つ場合があります。 |
| 停止 Ctrl+F2 | 標準の ボタンを 1 回クリックするとソフトキルが呼び出され、アプリケーションが |
| レイアウトの復元 | このボタンをクリックすると、現在のレイアウトへの変更が破棄され、デフォルトの状態に戻ります。 |
| タブをピン留め | 現在のタブを固定または固定解除するには、このボタンをクリックします。このウィンドウで最大数のタブに達したときにタブが自動的に閉じないようにするには、タブを固定する必要があります。 |
| 閉じる Ctrl+Shift+F4 | このボタンをクリックすると、実行ツールウィンドウの選択されたタブが閉じられ、現在のプロセスが終了します。 |
に置き換えられます。これは、次のクリックによってアプリケーションが強制終了されることを示します。たとえば、Unix では 
コンテキストメニューのオプション
項目 | 説明 |
|---|---|
クリップボードと比較 | エディターからの選択と現在のクリップボードの内容の違いを表示できるクリップボードとエディターダイアログを開きます。このダイアログは通常の比較ツールで、キャレットの行をクリップボードにコピーし、テキストを検索し、相違点間を移動し、空白を管理できます。 |
URL をコピー | 現在の URL をシステムクリップボードにコピーするには、このコマンドを選択します。このコマンドは、アプリケーションの出力に URL が含まれている場合にのみ表示されます。 |
Gist を作成 | このコマンドを選択して Gist を作成ダイアログを開きます。 |
すべてを削除 | 出力ウィンドウをクリアします。 |
コンソールツールバー
項目 | ツールチップとショートカット | 説明 |
|---|---|---|
| スタックトレースの上下 Ctrl+Alt+Up Ctrl+Alt+Down | このボタンをクリックすると、スタックトレース内で上下に移動し、ソースコード内の対応する位置にキャレットが移動します。 |
| ソフトラップを使用 | このボタンをクリックすると、出力のソフトラップモードが切り替わります。 |
| 最後までスクロールする | このボタンをクリックすると、スタックトレースの一番下に移動し、キャレットがソースコード内の対応する場所に移動します。 |
| 印刷 | コンソールテキストをデフォルトプリンタに送信するには、このボタンをクリックします。 |
| すべてを削除 | コンソールからすべてのテキストを削除するには、このボタンをクリックしてください。この機能はコンソールのコンテキストメニューからも利用できます。 |
| コンソール入力を使用 |
|
Karma サーバータブ
このタブは、Karma テストランナーを使用して JavaScript 単体テストを実行する場合にのみ表示されます。このタブを使用して、サーバーからの情報を表示および分析します。
詳細は、Karma を参照してください。
関連ページ：
Vue.js
Vue.js は、ユーザーインターフェースと高度な単一ページアプリケーションを開発するためのフレームワークです。PhpStorm は、個別のファイル、属性、プロパティ、メソッド、スロット名などで定義されたコンポーネントを含むコンポーネントの Vue.js 対応コード補完を使用して、HTML、CSS、JavaScript の Vue.js ビルドブロックのサポートを提供します。ビルトインデバッガーを使用すると、Vue.js のコードを PhpStorm で直接デバッグすることができます。PhpStor...
Angular
Angular は、クロスプラットフォームアプリケーションを構築するための一般的なフレームワークです。PhpStorm は Angular のサポートを提供し、新しい Angular アプリの作成やコンポーネントの作業からデバッグやテストまで、開発プロセスのすべてのステップで役立ちます。始める前に：Node.js をダウンロードしてインストールします。設定 | プラグインページのインストール済みタブで、JavaScript and TypeScript および Angular と AngularJS に...
実行 / デバッグ構成
PhpStorm は、実行 / デバッグ構成を使用して、コードを実行、デバッグ、テストします。各構成は、何を実行し、どのパラメーターと環境を使用するかを定義する、名前付きのスタートアッププロパティのセットです。実行 / デバッグ構成には 2 つのタイプがあります。一時的 — コンテキストメニューからを選択するたびに作成されます。コンテキストメニューを呼び出すには、オブジェクトまたは領域を右クリックします。永続的 — テンプレートから明示的に作成されるか、一時的な構成を保存することによって作成されま...
コードの実行 / デバッグ
簡単な方法：プログラムにパラメーターを渡さず、プログラムの開始前にアクションを実行する必要がない場合は、一時的な構成を使用してエディターまたはツールバーからプログラムを実行 / デバッグできます。現在のファイルを実行するエディターでファイルを開き、次のいずれかのオプションを使用して実行します。エディター領域の任意の場所を右クリックしてコンテキストメニューを開き、そこから実行および <script name> を選択します。エディターの上にあるツールバーで、ドロップダウンメニューから現在...
ファイルの差分ビューアー
この差分ビューアーは、2 つのファイルまたはファイルの 2 つのバージョン (ローカルの変更、またはローカルファイルとリモートリポジトリ内のそのリビジョン間の変更) を比較するときに表示されます。バイナリや .jar ファイルなど、あらゆる種類のファイルを比較できます。これを開くには、比較する 2 つのファイル、またはそのバージョンを比較するファイルを選択し、を押します。差分ビューアーが新しいタブで開きます。差分ビューアーは、コード補完、ライブテンプレート、その他の機能を有効にする強力なエディター...
Karma
Karma は、クライアント側 JavaScript をテストするためのツールです。Karma は、実際のブラウザーで実行されているアプリケーションに対してテストを実行し、テスト結果の正確さと信頼性を保証します。PhpStorm は Karma と統合されているため、IDE 内からテストの実行、デバッグ、カバレッジを監視できます。テスト結果はツリービューで確認でき、そこからテストソースに簡単に移動できます。テストのステータスは、エディターのテストの横に表示され、すぐに実行またはデバッグするオプショ...