React アプリケーションの実行とデバッグ
React アプリケーションを実行する
package.json の
startスクリプトの横にあるガターで
をクリックするか、ターミナル Alt+F12 で npm run startコマンドを実行するか、npm ツールウィンドウ () でstartタスクをダブルクリックします。
アプリケーションがコンパイルされ、開発サーバーの準備ができるまで待ちます。
実行ツールウィンドウまたはターミナルには、アプリケーションが実行されている URL が表示されます。アプリケーションが create-react-app で生成された場合、デフォルトの URL は http://localhost:3000/ です。このリンクをクリックすると、アプリケーションが表示されます。
実行 / デバッグ構成を介して React アプリケーションを実行する
上記のように、RubyMine 新規プロジェクトウィザードで create-vite を使用して作成されたアプリケーションの場合、RubyMine は、デフォルト名 npm start で npm 構成を生成します。この構成は、開発サーバーを起動し、開発モードでアプリケーションを起動する react-scripts start コマンドを実行します。
それ以外の場合は、ホスト、ポートなどの実際の設定を手動で実行 / デバッグ構成を作成するする必要があります。
npm 実行 / デバッグ構成を作成する
に移動します。または、ツールバーの実行ウィジェットから実行構成の編集を選択します。
開いた実行構成の編集ダイアログで、ツールバーの追加ボタン (
) をクリックし、リストから npm を選択します。開いた実行 / デバッグ構成: npm ダイアログの構成タブで、package.json の場所、Node.js ランタイム、および使用するパッケージマネージャーを指定します。
コマンドフィールドで、リストから実行を選択し、次にスクリプトリストから実行するスクリプトを選択します。ほとんどの場合、デフォルトの
startスクリプトになりますが、カスタムポートでアプリケーションを実行するなど、package.json で別のスクリプトを構成することもできます。
オプション:
ブラウザーでアプリケーションを開くには、次のように構成を更新します。ブラウザー / Live Edit タブで、起動後チェックボックスをオンにし、アプリケーションを開くブラウザーを選択して、アプリケーションが実行される URL アドレスを指定します。
アプリケーションをデバッグする場合は、Google Chrome(英語) または別の Chromium ベースのブラウザー(英語)を選択します。
アプリケーションの実行
ツールバーのリストから npm start run 構成を選択し、その横にある
をクリックします。
アプリケーションがコンパイルされ、開発サーバーの準備ができるまで待ちます。
実行ツールウィンドウまたはターミナルには、アプリケーションが実行されている URL が表示されます。このリンクをクリックすると、アプリケーションが表示されます。
または、上記のように、 RubyMine が起動時にアプリケーションを開くようにします。
React アプリケーションをデバッグする
デバッグセッションは、実行 / デバッグ構成を起動するから開始することも、開発モードでアプリケーションが実行されている URL を表示する実行ツールウィンドウから開始することもできます。
実行 / デバッグ構成を介してデバッグを開始する
React アプリケーションをデバッグするには、次の 2 つの実行 / デバッグ構成が必要です。
上記のように、開発モードでアプリケーションを起動するための npm 構成。
開発モードで実行されているアプリケーションにデバッガーを接続するための JavaScript デバッグ構成。
npm 実行 / デバッグ構成を使用して React アプリケーションを実行およびデバッグするに従って、npm 構成内に JavaScript デバッグ構成を作成して、一度に起動することができます。
または、JavaScript デバッグ実行 / デバッグ構成でデバッグを開始するに従って、npm と JavaScript デバッグの実行 / デバッグ構成を個別に作成して起動します。
単一の npm 実行 / デバッグ構成で React アプリケーションを実行およびデバッグする
単一の npm 実行 / デバッグ構成で React アプリケーションを実行およびデバッグする
コードにブレークポイントを設定します。
上記の説明に従って npm 構成を作成します。
create-react-appを使用してアプリケーションを生成した場合、RubyMine は npm start というデフォルト名の npm 構成をすでに作成しています。この構成は、実行ウィジェットおよび実行 / デバッグ構成ダイアログから利用できます。開いた実行 / デバッグ構成: npm ダイアログの構成タブで、package.json の場所、Node.js ランタイム、および使用するパッケージマネージャーを指定します。
コマンドフィールドで、リストから実行を選択し、次にスクリプトリストから実行するスクリプトを選択します。ほとんどの場合、デフォルトの
startスクリプトになりますが、カスタムポートでアプリケーションを実行するなど、package.json で別のスクリプトを構成することもできます。ブラウザー / Live Edit タブで、起動後チェックボックスを選択し、リストから Google Chrome(英語) または別の Chromium ベースのブラウザー(英語)を選択し、JavaScript デバッガーを使用するチェックボックスを選択して、アプリケーションを実行する URL を指定します。
実行をクリックします。
構成を再実行するには、実行ウィジェットのリストから構成を選択し、その横にある
をクリックします。RubyMine はアプリケーションを開発モードで実行し、同時にデバッグセッションを起動します。
最初のブレークポイントに到達したら、デバッグツールウィンドウに切り替えて通常どおり続行します。プログラムをステップ実行し、プログラムの実行を停止して再開し、中断したときにそれを調べ、コールスタックと変数を調べ、ウォッチを設定し、変数を評価し、実際の HTML DOM を表示します。
JavaScript デバッグ実行 / デバッグ構成でデバッグを開始する
コードにブレークポイントを設定します。
上記のように開発モードでアプリケーションを起動し、アプリケーションがコンパイルされて開発サーバーの準備ができるまで待ちます。
実行ツールウィンドウまたはターミナルには、アプリケーションが実行されている URL が表示されます。この URL をコピーして、後で JavaScript デバッグ構成で指定します。
JavaScript デバッグ構成を作成します。これを行うには、メインメニューのに移動し、
をクリックして、リストから JavaScript デバッグを選択します。開いた実行 / デバッグ構成: JavaScript デバッグダイアログで、構成の名前と、開発モードでアプリケーションが実行されている URL アドレスを指定します。この URL は、上記のように、実行ツールウィンドウまたはターミナルにコピーできます。
デバッグをクリックします。
構成を再実行するには、実行ウィジェットのリストから構成を選択し、その横にある
をクリックします。
最初のブレークポイントに到達したら、デバッグツールウィンドウに切り替えて通常どおり続行します。プログラムをステップ実行し、プログラムの実行を停止して再開し、中断したときにそれを調べ、コールスタックと変数を調べ、ウォッチを設定し、変数を評価し、実際の HTML DOM を表示します。
実行ツールウィンドウまたは組み込みのターミナルからデバッグを開始する
アプリケーションが localhost の開発モードで実行されている場合、特に create-react-app で生成された場合は、実行ツールウィンドウまたは組み込みのターミナルから直接デバッグセッションを開始できます。
コードにブレークポイントを設定します。
上記のように開発モードでアプリケーションを起動し、アプリケーションがコンパイルされて開発サーバーの準備ができるまで待ちます。
実行ツールウィンドウまたはターミナルには、アプリケーションが実行されている URL が表示されます。Ctrl+Shift を押したまま、この URL リンクをクリックします。RubyMine は、タイプ JavaScript デバッグの自動生成された 構成でデバッグセッションを開始します。
新しいターミナルから開発モードでアプリケーションを起動した場合は、リンクの横にあるブラウザーでデバッグを開始するボタンをクリックするだけです。
最初のブレークポイントに到達したら、デバッグツールウィンドウに切り替えて通常どおり続行します。プログラムをステップ実行し、プログラムの実行を停止して再開し、中断したときにそれを調べ、コールスタックと変数を調べ、ウォッチを設定し、変数を評価し、実際の HTML DOM を表示します。
既知の制限
デバッグセッション中にアプリケーションを初めて開くと、ページの読み込み時に実行されるコード内のブレークポイントの一部にヒットしない場合があります。その理由は、元のソースコードのブレークポイントで停止するには、RubyMine がブラウザーからソースマップを取得する必要があるためです。ただし、ブラウザーがこれらのソースマップを渡すことができるのは、ページが少なくとも 1 回完全にロードされた後でのみです。回避策として、ブラウザーでページを自分で再ロードします。
関連ページ：
React
React は、カプセル化されたコンポーネントから複雑なインタラクティブユーザーインターフェースを構築するための JavaScript ライブラリです。React オフィシャル Web サイトからライブラリの詳細を参照してください。RubyMine は、React と統合され、lint の設定、編集、実行、デバッグ、アプリケーションの保守を支援します。始める前に：お使いのコンピューターに Node.js がインストールされていることを確認してください。設定 | プラグインページのインストール済みタブ...
ブレークポイント
ブレークポイントは、特定のポイントでプログラムの実行を一時停止する特別なマーカーです。これにより、プログラムの状態と動作を調べることができます。ブレークポイントは、たとえば、特定のコード行に到達したときにプログラムを一時停止するなどの単純なものから、追加の条件をチェックしたり、ログに書き込んだりするなどのより複雑なロジックを含むものまであります。ブレークポイントは、一度設定すると、一時的なブレークポイントを除き、明示的に削除するまでプロジェクト内に残ります。ブレークポイントの種類：RubyMi
デバッグツールウィンドウ
デバッガーセッションを開始すると、デバッグツールウィンドウが開きます。このウィンドウを使用して、デバッガーセッションを制御し、プログラムデータ (フレーム、スレッド、変数など) を表示および分析し、デバッガーアクションを実行します。デフォルトでは、プログラムがブレークポイントに到達したときにデバッグツールウィンドウが開き、セッションが終了しても非表示になりません。この動作を変更するには、ビルド、実行、デプロイ | デバッガー設定ページに移動し、ブレークポイントでデバッグウィンドウを表示するチェ...
プログラムのステップスルー
ステップは、プログラムの段階的な実行を制御するプロセスです。RubyMine は、一連のステップアクションを提供します。特定のステップアクションの選択は、次の行に直接移動する必要があるか、中間のメソッド呼び出しもインスペクションする必要があるかなど、戦略によって異なります。ステップボタンは、デバッグツールウィンドウのツールバーにあります。デバッグツールウィンドウのツールバーを構成するデバッグツールウィンドウツールバーにアクションを追加するには、次の手順に従います。ツールバーを右クリックし、コンテ...
中断されたプログラムを調べる
デバッガーセッションが開始されると、デバッグツールウィンドウが表示され、次のいずれかが発生するまでプログラムが正常に実行されます。ブレークポイントがヒットしました、プログラムを手動で一時停止します、その後、プログラムは中断され、現在の状態を調べたり、実行を制御したり、実行時にさまざまなシナリオをテストしたりできます。フレームを調べる：プログラムの状態はフレームで表されます。プログラムが中断されると、現在のフレームスタックがフレームペインに表示されます。フレームはアクティブなメソッド呼び出しに対
実際の HTML DOM を表示する
クライアント側のコードをデバッグしている場合、デバッグツールウィンドウの要素タブには、実際のブラウザーページとその HTML DOM 構造を実装する HTML ソースコードが表示されます。ブラウザーまたはエディターを介してページに加えられた変更は、要素タブにもすぐに反映されます。現在、この機能は Google Chrome でのみ、デバッグセッション中にのみサポートされています。始める前に：設定で JavaScript and TypeScript バンドルプラグインが有効になっていることを確認します。...