検索ツールを使用してページのソース ファイルを検索する

  • [アーティクル]

検索ツールを使用して、HTML、CSS、JavaScript、イメージ ファイルなど、Web ページの特定のソース ファイルを検索します。

Web ページは主に、ブラウザーがコンテンツを表示するために使用する HTML ファイルです。 ただし、Web ページでは、一般に、より豊富なコンテンツを提供するために、CSS、JavaScript、イメージ ファイルなどの HTML ファイルに加えて、他のリソースが必要になります。

[ソース] ツールの [ナビゲーター] ウィンドウの [ページ] タブには、Web ページによってダウンロードされたすべてのリソースが表示されます。 しかし、リソースが多い場合は、それらを 検索 すると便利になります。 Web ページのすべてのリソースでテキストと正規表現の検索を行うには、 検索 ツールを使用します。

キーボード ショートカットを使用して検索ツールを開く

検索ツールをすばやく開くには:

  1. DevTools を開くには、Web ページを右クリックし、[ 検査] を選択します。 または、 Ctrl + Shift + I (Windows、Linux) または Command + Option + I (macOS) を押します。 DevTools が開きます。

  2. DevTools で Esc キーを押してドロワーを開き、[ドロワー] ツール バーの [ 検索 ] タブを選択します。そのタブが表示されない場合は、[ その他のタブ ] ([その他のタブ] アイコン) ボタンをクリックするか、[その他の ツール ] ([その他のツール] アイコン) ボタンをクリックします。

    または、 Ctrl + Shift + F (Windows、Linux) または Command + Option + F (macOS) を押します。

[クイック ビュー] パネルで検索ツールが開きます。

検索ツール(検索ツール バーあり)

「グローバル キーボード ショートカット」も参照してください。

コマンド メニューを使用して検索ツールを開く

コマンド メニューから検索ツールを開くには:

  1. DevTools を開くには、Web ページを右クリックし、[ 検査] を選択します。 または、 Ctrl + Shift + I (Windows、Linux) または Command + Option + I (macOS) を押します。 DevTools が開きます。

  2. Ctrl + Shift + P (Windows、Linux) または Command + Shift + P (macOS) を押して、コマンド メニューを開きます。

  3. 検索の入力を開始し、[検索の表示] を選択します。

[検索の表示] 項目が選択されているコマンド メニュー

テキストを検索する

現在の Web ページとそのリソース ファイル内のテキストを検索するには:

  1. 検索入力フィールドにフォーカスを置きます。
  2. 検索するテキストを入力し、 Enter キーを押します。

検索ツールは、一致するリソースの一覧を表示し、対応するテキスト行を強調表示します。 一致するファイルと行の数もツールの下部に示されます。

検索ツールに表示され、一致するテキストが黄色で強調表示された検索結果

大文字と小文字の一致 (小文字または大文字)

既定では、 検索 ツールでは大文字と小文字は区別されません。 用語の検索は、小文字または大文字に関係なく、その用語の出現箇所と一致します。

特定の大文字と小文字 (小文字または大文字) に一致する結果のみを検索するには、検索ツール バーの [ 大文字と小文字の一致 (Aa)] ボタンをクリックします。

正規表現を検索する

正規表現を使用して、一致する結果を見つけることができます。 正規表現を使用するには、ツール バーの [正規表現を使用する (.*)] ボタンをクリックし、[検索] テキスト ボックスに有効な JavaScript 正規表現を入力します。

正規表現の検索

通常、JavaScript で正規表現パターンを区切るスラッシュ (/) 文字は必要ありません。

同様に、JavaScript 正規表現のスラッシュ (/) の後に必要に応じて表示されるフラグは、ここでは使用できません。 検索ツールは、および 正規表現フラグがgi指定されているかのように結果とm一致します。

Flag 名前 説明
g グローバル 検索はグローバルです。ツールは、正規表現 g フラグが指定されたかのように、最初の一致が見つかった後もファイルの検索を続行します。
i 大文字と小文字を区別しない 検索では、フラグが指定されているかのように、既定では大文字と小文字が i 無視されます。 このフラグを無効にし、特定のケースに一致する結果のみを検索するには、検索ツール バーの [大文字と小文字の一致 (Aa)] ボタンをクリックします。
m マルチ 検索は複数行です。ツールはソース ファイル内の各行を個別に ^ 扱い、記号と $ 記号はそれぞれ、フラグが指定されたかのように、任意の行の開始と終了に m 一致します。

関連項目:

ソース ツールで見つかったファイルを開く

検索を行った後、結果行をクリックして、対応するファイルを開きます。 [ソース] ツールがメイン パネルで開き、一致する行までスクロールしてリソース ファイルを読み込みます。

検索行をクリックすると、ソース ツールが開き、対応するリソースが読み込まれます

検索結果の更新

Web ページは読み込みが完了した後も引き続きリソースを要求できるため、[ 検索 ] パネルに表示される結果はしばらくすると古くなる可能性があります。

検索結果を更新するには、次のいずれかの操作を行います。

  • ツール バーの [ 更新 ] ([検索の更新] ボタン) ボタンをクリックします。
  • 検索入力フィールドに用語を入力して、もう一度検索します。

検索結果をクリアするには、ツール バーの [クリア ] ([検索のクリア] ボタン) ボタンをクリックします。