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

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

   

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

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

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

   

3. オプション:

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

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

   

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

   

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

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

   

   または、 上記のように、JetBrains Rider が起動時にアプリケーションを開く機能を有効化します。

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

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

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

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

   

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

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

   

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

   

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

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

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

   

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

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

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

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

   

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

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

   

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

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

   

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