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

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

   

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

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

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

   

3. オプション:

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

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

   

1. ツールバーのリストから npm start 実行構成を選択し、その横にある をクリックします。

   

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

   実行 ツールウィンドウまたは ターミナル には、アプリケーションが実行されている URL が表示されます。 アプリケーションを表示するには、このリンクをクリックしてください。

   

   または、 上記のように、 IntelliJ IDEA が起動時にアプリケーションを開くようにします。

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

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

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

   create-react-app を使用してアプリケーションを生成した場合、IntelliJ IDEA はデフォルト名 npm start で すでに npm 構成をすでに作成しています。 構成は、 実行 ウィジェットおよび 実行 / デバッグ構成 ダイアログで利用できます。

   

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

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

   

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

   

5. 実行 をクリックします。

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

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

   

6. 最初のブレークポイントに到達したら、 デバッグツールウィンドウ に切り替え、通常どおり続行します： プログラムをステップ実行し、 プログラムの実行を停止して再開し、 中断時にそれを調べ 、コールスタックと変数を調べ、ウォッチを設定し、変数を評価し、 実際のHTML DOMを表示します。

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

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

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

   

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

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

   

5. デバッグ をクリックします。

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

   

6. 最初のブレークポイントに到達したら、 デバッグツールウィンドウ に切り替え、通常どおり続行します： プログラムをステップ実行し、 プログラムの実行を停止して再開し、 中断時にそれを調べ 、コールスタックと変数を調べ、ウォッチを設定し、変数を評価し、 実際のHTML DOMを表示します。