Angular アプリケーションの実行とデバッグ

npm 実行 / デバッグ構成を作成する

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

   

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

2. 開いた 実行 / デバッグ構成: npm ダイアログの 構成 タブで、 package.json の場所、Node.js ランタイム、および使用するパッケージマネージャーを指定します。

   コマンド フィールドで、リストから 実行 を選択し、次に スクリプト リストから実行するスクリプトを選択します。 ほとんどの場合、デフォルトの 開始 スクリプトになりますが、カスタムポートでアプリケーションを実行するなど、 package.json で別のスクリプトを構成することもできます。

   

3. オプション:

   ブラウザーでアプリケーションを開くには、構成を次のように更新します： ブラウザー / Live Edit タブで、 起動後 チェックボックスをオンにし、アプリケーションを開くブラウザーを選択して、アプリケーションが実行される URL アドレスを指定します。

   アプリケーションをデバッグする場合は、 Google Chrome(英語) または別の Chromium ベースのブラウザー(英語)を選択します。

   

アプリケーションの実行

1. ツールバーの 実行 ウィジェットのリストから、 すでに npm タイプの実行構成を選択します。 これは、自動生成された Angular CLI サーバー 構成、または 前述のように自分で作成したカスタム構成のいずれかになります。

2. をクリックしてください。

   

3. アプリケーションがコンパイルされ、開発サーバーの準備ができるまで待機します。

   実行 ツールウィンドウまたは ターミナル には、アプリケーションが実行されている URL が表示されます。 アプリケーションが @angular/cli で生成された場合、デフォルトの URL は http://localhost:4200/ です。 このリンクをクリックすると、アプリケーションが表示されます。

   

   または、 上記のように、RubyMine で起動時にアプリケーションを開くように有効化できます。

単一の npm 実行 / デバッグ構成で Angular アプリケーションを実行およびデバッグする

1. コードに ブレークポイントを設定します。

2. 上記の説明に従ってすでに npm 構成を作成します。

3. 開いた 実行 / デバッグ構成: npm ダイアログの 構成 タブで、 package.json の場所、Node.js ランタイム、および使用するパッケージマネージャーを指定します。

   コマンド フィールドで、リストから 実行 を選択し、次に スクリプト リストから実行するスクリプトを選択します。 ほとんどの場合、デフォルトの 開始 スクリプトになりますが、カスタムポートでアプリケーションを実行するなど、 package.json で別のスクリプトを構成することもできます。

   

4. ブラウザー / Live Edit タブで、 起動後 チェックボックスを選択し、リストから Google Chrome(英語) または別の Chromium ベースのブラウザー(英語)を選択し、 JavaScript デバッガーを使用 チェックボックスを選択して、アプリケーションを実行する URL を指定します。

   

5. 実行 をクリックしてください。

   構成を再実行するには、 実行 ウィジェットのリストから構成を選択し、その横にある をクリックします。

   RubyMine は、アプリケーションを開発モードで実行し、同時にデバッグセッションを開始します。

   

6. 最初のブレークポイントに到達したら デバッグツールウィンドウ に切り替え、通常通り操作します： プログラムをステップ実行、 停止および再開、 中断時に調査 、コールスタックや変数の確認、ウォッチの設定、変数の評価、 実際の HTML DOM の表示などが可能です。

   ソースマップを無視して実際に実行されているコードをステップ実行するには、 を デバッグ ツールウィンドウのツールバーで押してください。

JavaScript デバッグ実行 / デバッグ構成でデバッグを開始する

1. コードに ブレークポイントを設定します。

2. 上記のように開発モードでアプリケーションを起動し、アプリケーションがコンパイルされて開発サーバーの準備ができるまで待ちます。

   実行 ツールウィンドウまたは ターミナル には、アプリケーションが実行されている URL が表示されます。 この URL をコピーして、 後で JavaScript デバッグ構成で指定します。

   

3. JavaScript デバッグ 構成を作成します。 これを行うには、メインメニューの 実行 | 実行構成の編集 に移動し、 をクリックして、リストから JavaScript デバッグ を選択します。

   Angular CLI でアプリケーションを生成した場合、 上記のように RubyMine ですでにデフォルト名 アプリケーションのデバッグ とデフォルト URL http://localhost:4200 を持つ JavaScript デバッグ 実行/デバッグ構成が作成されています。 JavaScript デバッグ ノードのリストからこの実行 / デバッグ構成を選択します。

   

4. 開いた 実行 / デバッグ構成: JavaScript デバッグ ダイアログで、構成の名前と、開発モードでアプリケーションが実行されている URL アドレスを指定します。 この URL は、 実行 ツールウィンドウまたは ターミナル で 上記のようにコピーできます。

   

5. デバッグ をクリックしてください。

   構成を再実行するには、 実行 ウィジェットのリストから構成を選択し、その横にある をクリックします。

   

6. 最初のブレークポイントに到達したら デバッグツールウィンドウ に切り替え、通常通り操作します： プログラムをステップ実行、 停止および再開、 中断時に調査 、コールスタックや変数の確認、ウォッチの設定、変数の評価、 実際の HTML DOM の表示などが可能です。

   ソースマップを無視して実際に実行されているコードをステップ実行するには、 を デバッグ ツールウィンドウのツールバーで押してください。

1. コードに ブレークポイントを設定します。

2. 上記のように開発モードでアプリケーションを起動し、アプリケーションがコンパイルされて開発サーバーの準備ができるまで待ちます。

3. 実行 ツールウィンドウまたは ターミナル には、アプリケーションが実行されている URL が表示されます。 アプリケーションが @angular/cli で生成された場合、デフォルトの URL は http://localhost:4200/ です。 Ctrl+Shift を押したまま、この URL リンクをクリックします。 RubyMine は、自動生成された Angular アプリケーション 構成（タイプ JavaScript デバッグ ）でデバッグセッションを開始します。

   

   あるいは、リストから自動生成された Angular アプリケーション 構成を選択し、リストの横にある デバッグ ボタン をクリックします。

   新しいターミナルから開発モードでアプリケーションを起動した場合は、リンク横の ブラウザーでデバッグを開始する ボタンをクリックするだけです。

   

   デフォルトでは、このボタンは表示されていません。 表示するには、 設定 ダイアログ（Ctrl+Alt+S ）を開き、 詳細設定 に移動し、 JavaScript と TypeScript エリアの ターミナルの localhost リンクに 'ブラウザでデバッグを開始' ボタンを表示する チェックボックスを選択してください。