実行 / デバッグ構成: Node.js/Chrome への接続
作成: 
このページでは、構成固有の項目と、すべての実行 / デバッグ構成に共通のオプションについて説明します。この構成の使用方法の詳細については、「実行中の Node.js アプリケーションのデバッグ」を参照してください。
このダイアログで、すでに実行中の Node.js(英語) アプリケーションをデバッグするための設定を作成します。このアプローチにより、Node.js サーバーを再起動せずにデバッグセッションを再起動することができます。
また、この構成を使用して、NW.js(英語) アプリケーションのバックグラウンドおよび追加のメインプロセスをデバッグします。実行 / デバッグ構成: NW.js を参照してください。
この構成では、Chrome 拡張機能をデバッグすることもできます。
始める前に
Node.js をダウンロードしてインストールします。
Node.js/Chrome 構成設定への特定のアタッチ
項目 | 説明 |
|---|---|
ホスト | このフィールドでは、アプリケーションが実行されているホストを指定します。 |
ポート | このフィールドでは、接続する Node.js プロセスを開始するときに、  |
自動的に再接続する | アプリケーションのコードが変更された後に、WebStorm 組み込みデバッガーが実行中の Node.js プロセスに再接続できるようにするには、このチェックボックスをオンにします。これにより、コードが更新されると Node.js プロセスが自動的に再ロードされる、nodemon ユーティリティ(英語)を使用する Node.js アプリケーションをデバッグできるようになります。詳細については、nodemon を使用するアプリケーションのデバッグを参照してください。 |
ローカルファイルのリモート URL | この領域では、プロジェクトフォルダーのリモートパスを指定します。これは、実行中のアプリケーションのルートフォルダーが WebStorm プロジェクトルートフォルダーの名前と異なる場合に役立ちます。以下の例では、WebStorm プロジェクトルートフォルダー /Users/WsProjects/express がサーバー上の /usr/src/app にマップされています。  |
共通設定
実行構成を編集するとき（ただし実行構成テンプレートは編集しないとき）、次のオプションを指定できます。
項目 | 説明 |
|---|---|
名前 | 実行構成の名前を指定して、編集または実行時に他の構成の間ですばやく識別できるようにします。 |
プロジェクトファイルとして保存 | 実行構成設定を含むファイルを保存して、他のチームメンバーと共有します。デフォルトの場所は .idea/runConfigurations です。ただし、.idea ディレクトリを共有したくない場合は、プロジェクト内の他のディレクトリに構成を保存できます。 デフォルトでは無効になっており、WebStorm は実行構成設定を .idea/workspace.xml に保存します。 |
ツールバー
実行 / デバッグ構成のツリー表示には、プロジェクトで使用可能な構成を管理したり、デフォルトの構成テンプレートを調整したりするのに役立つツールバーがあります。
項目 | ショートカット | 説明 |
|---|---|---|
| Alt+Insert | 実行 / デバッグ構成を作成します。 |
| Alt+Delete | 選択した実行 / デバッグ構成を削除します。デフォルト設定は削除できません。 |
| Ctrl+D | 選択した実行 / デバッグ構成のコピーを作成します。デフォルト設定のコピーを作成してください。 |
| このボタンは、一時的な構成を選択した場合にのみ表示されます。このボタンをクリックして、一時的な構成を永続的なものとして保存します。 | |
| 新しいフォルダーに移動 / 新しいフォルダーを作成します。実行 / デバッグ構成は、フォルダーに配置することでグループ化できます。 フォルダーを作成するには、カテゴリ内の設定を選択し、 次に、設定をフォルダー内、フォルダー間、フォルダー外に移動するには、ドラッグまたは グループ化を解除するには、フォルダーを選択して | |
| このボタンをクリックすると、設定がアルファベット順にソートされます。 |
をクリックしてフォルダー名を指定します。カテゴリだけにフォーカスがある場合は、空のフォルダーが作成されます。
ボタンと 
ボタンを使用します。
起動前
この領域では、選択した実行 / デバッグ構成を開始する前に実行するタスクを指定できます。タスクは、リストに表示されている順序で実行されます。
項目 | ショートカット | 説明 |
|---|---|---|
| Alt+Insert | このアイコンをクリックして、以下の使用可能なタスクのいずれかを追加します。
|
| Alt+Delete | このアイコンをクリックして、選択したタスクをリストから削除します。 |
| Enter | 選択したタスクを編集するには、このアイコンをクリックします。開いたダイアログで必要な変更を加えます。 |
| Alt+Up Alt+Down | これらのアイコンをクリックして、選択したタスクをリスト内で 1 行上または下に移動します。タスクは、リストに表示されている順に実行されます。 |
このページを表示する | 実行 / デバッグ構成を実際に開始する前に、実行 / デバッグ構成設定を表示するには、このチェックボックスを選択します。 | |
ツールウィンドウをアクティブにする | デフォルトではこのチェックボックスは選択されており、実行 / デバッグ構成を開始すると実行またはデバッグツールウィンドウが開きます。 それ以外の場合、チェックボックスがオフの場合、ツールウィンドウは非表示になります。ただし、構成が実行されている場合は、Alt+4 または Alt+5 を押すことにより、構成に対応するツールウィンドウを自分で開くことができます。 |
関連ページ：
Node.js の実行とデバッグ
WebStorm は、Node.js アプリケーションの実行とデバッグを支援します。WebStorm から起動し、すでに実行中のアプリケーションにアタッチするアプリケーションをデバッグできます。始める前に：設定 | プラグインページのインストール済みタブで、Node.js および JavaScript Debugger に必要なプラグインが有効になっていることを確認します。詳細については、「プラグインのマッピング」を参照してください。Node.js アプリケーションを実行する：WebStorm は...
実行 / デバッグ構成: NW.js
作成: このダイアログで、NW.js アプリケーションを実行し、そのメインプロセスをデバッグするための構成を作成します。バックグラウンドプロセスと追加のメインプロセスをデバッグするには、実行中の Node.js アプリケーションのデバッグで説明されている Node.js/Chrome の実行 / デバッグ構成にアタッチするを使用します。始める前に：NW.js をインストールします。アプリケーションをデバッグする場合は、NW.js の SDK ビルドを使用していることを確認してください。NW.js 固有...
Chrome での JavaScript のデバッグ
WebStorm は、client-sideJavaScript コード用の組み込みデバッガーを提供します。以下のビデオと手順では、このデバッガーの使用を開始するための基本的な手順を説明しています。始める前に：設定で JavaScript Debugger バンドルプラグインが有効になっていることを確認します。を押して設定を開き、を選択します。インストール済みタブをクリックします。検索フィールドに JavaScript Debugger と入力します。プラグインの詳細については、プラグインのマッピン...
実行ツールウィンドウ
実行ツールウィンドウには、アプリケーションによって生成された出力が表示されます。各タブの外観は、実行中のアプリケーションの種類によって異なり、追加のツールボックスとペインを含めることができます。アプリケーションがの開発モードで実行されている場合は、実行ツールウィンドウから直接デバッグを開始できます。を押したまま、アプリケーションが実行されている URL をクリックするだけです。Vue.js アプリケーションをデバッグする、Angular アプリケーションをデバッグする、Vite アプリケーショ...
実行 / デバッグ構成
WebStorm は、実行 / デバッグ構成を使用して、コードを実行、デバッグ、テストします。各構成は、何を実行し、どのパラメーターと環境を使用するかを定義する、名前付きのスタートアッププロパティのセットです。実行 / デバッグ構成には 2 つのタイプがあります。一時的 — コンテキストメニューからを選択するたびに作成されます。コンテキストメニューを呼び出すには、オブジェクトまたは領域を右クリックします。永続的 — テンプレートから明示的に作成されるか、一時的な構成を保存することによって作成されま...
外部ツール
コンパイラー、リンター、コード圧縮プログラムなどのサードパーティのスタンドアロンアプリケーションを使用する推奨方法は、ツール固有のファイルウォッチャーを構成することです。このファイルウォッチャーはファイルへの変更を追跡し、必要に応じてアプリケーションを自動的に実行します。詳細については、File Watchers を参照してください。または、WebStorm でスタンドアロンのサードパーティアプリケーションを外部ツールとして構成することもできます。その結果、メインメニューと場合によってはコンテキス...