JetBrainsの資料にある通り、RubyMineではRailsに加えてReactもデバッグできます。

　
Reactのデバッグについては、公式ドキュメントに

Only for applications created with create-react-app.

Debugging of JavaScript code is only supported in Google Chrome and in other Chromium-based browsers.

Debug a React application - React | RubyMine

とあることから、 create-react-app で作ったReactアプリしかデバッグできないようも感じます。

　
ただ、手元で試したところ Vite.jsで作ったReactアプリもデバッグできたため、手順をメモしておきます。

　
ちなみに、JetBrainsのyoutrackには Vite.js に関するものも登録されているため、合わせてご確認ください。
Support for vite : WEB-46507

また、今回メモした内容よりも良い方法をご存じの方がいらっしゃいましたら、教えていただけるとありがたいです。

環境
デバッグするまでの流れ
ソースコード

環境

以前作成した、React + Rails + Vite.js なSPAアプリを使います。
React + Rails + Vite.js なSPAアプリをモノレポで作ってみた - メモ的な思考的な

　
今回は、ReactやRailsのバージョンは変えず、 Vite.js まわりをアップデートした上で利用します。

mac
バックエンド
- Ruby 3.0.1
- Rails 6.1.4.1
- vite_rails 3.0.9
- vite_ruby 3.1.4
フロントエンド
- TypeScript 4.4.4
- React.js 17.0.2
- React Router 5.2.1
- Vite.js 2.9.1
- vite-plugin-ruby 3.0.9

デバッグするまでの流れ

Railsをdevelopmentで起動するための設定を追加

まずは、Rails を development で起動する設定を行います。

Select Run/Debug Configuration の枠から Edit Configurations... を選択します。

次に、以下の図のようにRailsの起動設定を行います。

なお、RubyMineでRailsプロジェクトを読み込んでいれば設定済かもしれません。

Reactを run dev する設定を追加

続いて、同じく Run/Debug Configuration より、Reactを run dev で起動するための設定を追加します。

npm テンプレートにて、プロジェクトの package.json を参照して run dev するような設定とします。

　
なお、今回の package.json の scripts はこんな感じで、Reactは vite を使って起動するようになっています。

{
  "name": "frontend",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "serve": "vite preview"
  },
  // (略)
}