RubyMine 2026.3 Help

JavaScript デバッガーの構成

RubyMine は、 クライアントサイド JavaScript コード用の組み込みデバッガーを提供します。 デバッグセッションを開始すると、ビルトインデバッガーが自動的に起動します。

デバッグを正常に行うには、組み込みの Web サーバーポートを指定し、他のデバッガーオプションについては RubyMine が提案するデフォルト設定をそのまま受け入れてください。

始める前に

  1. 設定で JavaScript and TypeScript バンドルプラグインが有効になっていることを確認します。 Ctrl+Alt+S を押して設定を開き、 プラグイン を選択します。 検索フィールドに JavaScript と TypeScript と入力します。 プラグインに関する詳細は、 プラグインの管理を参照してください。

  2. 設定で JavaScript Debugger バンドルプラグインが有効になっていることを確認します。 Ctrl+Alt+S を押して設定を開き、 プラグイン を選択します。 検索フィールドに JavaScript デバッガー と入力します。 プラグインに関する詳細は、 プラグインの管理を参照してください。

組み込みの Web サーバーポートを設定する

RubyMine には、Web ブラウザーでアプリケーションをデバッグしたり、RubyMine 内蔵ブラウザーでコードをプレビューしたりできる内蔵 Web サーバーがあります。 このサーバーは常に実行されており、手動による構成は必要ありません。 組み込みサーバーで実行されているアプリケーションをデバッグする詳細を参照してください。

  1. Ctrl+Alt+S を押して設定を開き、 ツール | ウェブブラウザーとプレビュー を選択します。

  2. ビルトインサーバー エリアで、組み込み Web サーバーが実行されるポートを指定します。 デフォルトでは、このポートは RubyMine がサービスからの接続を受け入れるデフォルトの RubyMine ポート 63342 に設定されています。 ポート番号は 1024 から始まる他の値に設定できます。

    内蔵サーバーポート

デフォルトのデバッガー構成をカスタマイズする

呼び出しを抑制する

  1. Ctrl+Alt+S を押して設定を開き、 ツール | ウェブブラウザーとプレビュー に移動します。

  2. 外部接続を受け入れ可能 または 署名されていない要求を許可する のチェックボックスをそれぞれオフにすることで、他のコンピューターや RubyMine の外部から組み込みサーバー上のファイルへの呼び出しを抑制します。

    外部からの呼び出しを抑制する

ブレークポイントを削除する方法を選択する

デフォルトでは、マウスの左ボタンをクリックすることでブレークポイントを切り替えることができます。 この動作を変更するには:

  1. Ctrl+Alt+S を押して設定を開き、 ビルド、実行、デプロイ | デバッガー に移動します。

  2. ブレークポイントの除去 領域で、適切なオプションを選択します。

    ブレークポイントを削除する

スキップするスクリプトを指定する

一部のスクリプト (たとえば、 システム などの標準 Java クラスのメソッド) は、通常デバッグする必要がないことが多いため、 ステップイン によってスキップされます。 このリストは、 設定 ダイアログ (Ctrl+Alt+S) の ビルド、実行、デプロイ | デバッガー | ステップ実行中 ページで微調整できます。

  1. デバッグセッションの起動に使用する実行/デバッグ構成を開き、 ステップ実行中 タブに切り替えます。

  2. 自動 スマートステップイン を抑制するには、 常にスマートステップインする チェックボックスをオフにします。

  3. ソースマップの ignoreList フィールドからスクリプトをスキップするには、 ソースマップで指定された既知のサードパーティスクリプトを無視する チェックボックスを選択します。

    古い Chrome 固有のフィールド名 x_google_ignoreList は非推奨ですが、 ignoreList フィールドがない場合は引き続き認識される可能性があります。 詳しくは、 ソースマップ仕様を参照してください。

  4. カスタムスクリプトにステップインしないようにするには、 以下のパターンに一致する URL のスクリプトにステップインしない チェックボックスを選択し、下にあるそのようなスクリプトのデフォルトリストを展開します。 *、 ?、 **、 ! を使用します。

    JavaScript デバッガー: スクリプトをスキップ

パターン構文

パターンでは次の文字がサポートされています:

  • アスタリスク * は、スラッシュ / 以外の任意の数の文字に一致します。 この文字は単一のパス部分内で使用します。

  • 疑問符 ? は、スラッシュ / 以外のちょうど一文字に一致します。

  • セグメント全体としての double アスタリスク ** は、任意の数のパスセグメントに一致します。 意味は位置によって異なります:

    • 先頭部分としては、任意の先頭シンボルに一致します。

    • 末尾部分としては、任意の末尾シンボルに一致します。

    • 中間では、少なくとも一つの部分に一致します。 たとえば、 a/**/b は a/x/b と a/x/y/b に一致しますが、 a/b には一致しません。

  • 最後のセグメントの末尾に置かれた double アスタリスク ** (単独の完全なセグメントではないもの。例: foo**) は、そのセグメントの後の任意のサフィックスに一致します。 たとえば、 foo** は foo、 foobar、 foo/bar に一致します。

  • 感嘆符 ! で始まるパターンは、指定されたパターンを否定し、リスト内でその前に追加されたパターンを変更します。 それ自体で新しいパターンを追加することはありません。

例 1

パターンリスト ["**/*.ts", "!**/*.test.ts"] では、最初の glob がすべての .ts ファイルに一致します。 後続のパターンは、最初の glob を変更して、すべての .test.ts ファイルを一致対象から除外します。

例 2

渡された URL は、スラッシュ / によって部分に分割されます。 したがって、 **/node_modules/** は次のように分割されます::

  1. double アスタリスク ** は、 ノード_モジュール セグメントより前の任意のパスに一致します。

  2. ノード_モジュール は URL 内の ノード_モジュール に一致します。

  3. double アスタリスク ** は、後続の任意のものに一致します。

その結果、パターン **/node_modules/** は ノード_モジュール を含む任意の URL に一致します。

スクリプトの URL はパターン全体に対して一致判定されることに注意してください。 後続の double アスタリスク ** を削除すると、パターンは ノード_モジュール で終わる任意の URL に一致しますが、そのような URL はおそらく存在しません。

例 3

特定のファイル名で終わる任意のパターンに一致させるには、後続の double アスタリスク ** を省略します。

  • **/app.js は app.js で終わるすべての URL に一致します。

  • 次のパターンリストは、 ノード_モジュール 内のスクリプトを、 app.js と命名されたものを除いてすべて無視します。

    **/node_modules/** !**/app.js

拡張オプション

  • Ctrl+Alt+S を押して設定を開き、 ビルド、実行、デプロイ | デバッガー | データビュー に移動します。

    インラインデバッグを有効または無効にしたり、オブジェクトの値や 式の評価結果を含むツールヒントをいつ表示するかを指定したりします。

    JavaScript デバッガー: データビュー
  • Ctrl+Alt+S を押して設定を開き、 ビルド、実行、デプロイ | デバッガー | データビュー | JavaScript に移動します。

    オブジェクトプロパティをオブジェクトノードに表示するかどうかを指定します。 表示する場合は、プロパティを指定します。 プロパティのリストを管理するには、 と を使用します。

    オブジェクトノードに表示するプロパティ

推奨する Chrome ユーザーデータでデバッグセッションを開始する

デバッグセッションが、通常のウィンドウではなく、カスタム Chrome ユーザーデータ(英語)で新しいウィンドウで開始されることに気付くかもしれません。 その結果、ウィンドウの見た目が通常と異なり、たとえばブックマーク、ブラウザー履歴、拡張機能が表示されず、開発エクスペリエンスが損なわれます。 これは、RubyMine が Chrome デバッグプロトコル を使用し、 --リモートデバッグポート オプションで Chrome を実行するために発生します。 ただし、Chrome がすでに起動している場合、同じユーザーデータディレクトリを持つ新規または既存の Chrome インスタンスに対してデバッグポートを開くことができません。 そのため、RubyMine は常にカスタムユーザーデータディレクトリを持つ新しいウィンドウでデバッグセッションを開始します。

使い慣れた外観で新しい Chrome インスタンスを開くには、RubyMine で Chrome をユーザーデータディレクトリから開始するように構成してください。

Custom Chrome user data

RubyMine で Chrome を設定して、推奨する Chrome ユーザーデータで起動する

  1. お好みの Chrome ユーザーデータ(英語)を Chrome のデフォルトのユーザーデータディレクトリ(英語)とは異なる別のカスタムディレクトリ 形式でコンピューターに保存します。

    Chrome 136 以降はデフォルトのユーザーディレクトリでのデバッグをサポートしていないため、お好みのユーザーデータを別のカスタムディレクトリに保存する必要があります。 詳しくは Chrome オフィシャル Web サイト(英語)を参照してください。

  2. Ctrl+Alt+S を押して設定を開き、 ツール | ウェブブラウザーとプレビュー を選択します。

  3. 新しい Chrome 構成を作成するには、 追加 をクリックします。 新しい項目がリストに表示されます。 パス フィールドに、Chrome インストールフォルダーへのパスを指定します。

  4. 新しい構成を選択し、 編集 ボタン (編集) をクリックします。

  5. Chrome 設定 ダイアログで、 カスタムユーザーデータディレクトリを使用する チェックボックスを選択し、優先するユーザーデータを含むカスタムディレクトリへのパスを指定します。

    複数の ユーザーデータプロファイル(英語)がある場合、それぞれが別々のサブディレクトリに保存されます。 プロファイルを使用するには、 コマンドラインオプション フィールドで以下のように指定します。

    --profile-directory="<profile_to_use>"
    カスタムプロファイルサブディレクトリを指定する
  6. Web ブラウザーで説明されているように、Chrome ブラウザー構成を デフォルトとしてマークしてください。 実行 / デバッグ構成の作成の際は、 ブラウザー リストから必要なブラウザーを選択することを忘れないでください。

2026 年 11 月 9 日