[検索] パネルを使用して、読み込まれたすべてのリソースのテキストを検索します。
または、組み込みの検索バーを使用して、特定のツールで開いたリソース内のテキストを検索することもできます。
概要
[検索] パネルでは、読み込まれたすべてのリソースでテキストを検索できます。正規表現や大文字と小文字の区別を使用するオプションもあります。テキストを見つけたら、[ソース] パネルでそのソースを確認できます。
検索パネルを開く
[検索] パネルは、いくつかの方法で開くことができます。まず、DevTools を開く。次に、次のいずれかを行います。
- DevTools の右上にある
[DevTools のカスタマイズと制御] > [その他のツール] > [検索] を選択します。
- Esc キーを押してドロワーを開き、左上の
[その他のツール] > [検索] を選択します。
- Command+Option+F(Mac)または Ctrl+Shift+F(Windows/Linux)を押します。
読み込まれたすべてのリソースでテキストを検索する
読み込まれたすべてのリソースでテキストを検索するには、[検索] パネルの検索バーにクエリを入力して Enter キーを押します。
1 行に複数の一致が見つかった場合、検索結果には同じ行番号でそれらすべてが一覧表示されます。検索結果をクリックすると、DevTools で [ソース] の行が開き、一致する行がスクロールして表示されます。
クエリで大文字と小文字を区別するには、[
] 大文字と小文字を区別するボタンを切り替えます。正規表現に一致するテキストを検索するには、[
正規表現] ボタンを切り替えます。クエリを再実行、展開、消去する
検索クエリを再実行するには、[ 更新] をクリックします。
すべての検索結果を展開するには:
- Windows / Linux の場合は、Ctrl+Shift+{ または } キーを押します。
- macOS では、command+option+{ キーまたは } キーを押します。
検索結果を消去するには、 [クリア] をクリックします。
特定のツールでテキストを検索する
検索範囲を特定のツールで開いたリソースに絞り込むには、ツールがサポートしている場合は組み込みの検索バーを使用します。
検索バーには、前の検索結果と次の検索結果に移動するための上下ボタンがあります。
特定のツールに組み込まれている検索バーを開くには、Command+F(Mac)または Ctrl+F(Windows/Linux)を押します。
すべての DevTools パネルとタブに検索バーが組み込まれているわけではありませんが、組み込まれている場合は、ツール固有の機能が提供されていることがよくあります。以下に、検索バーとその機能を備えたツールの一覧を示します。
パネルまたはタブ | 大文字と小文字を区別します | 正規表現 | 範囲 | ツール固有の機能 |
---|---|---|---|---|
要素 | DOM ツリー | セレクタと XPath で検索する | ||
コンソール | ログ メッセージ | |||
出典 | 現在のソースファイル | 次のように置き換えます。 | ||
ネットワーク | ネットワーク ヘッダー、ペイロード、レスポンス | |||
パフォーマンス | [Main] トラックのアクティビティと [Network] トラックのリクエスト | |||
メモリ | プロフィール | サンプリング プロファイルをコスト、名前、ファイルで検索する | ||
JavaScript プロファイラ | CPU プロファイル | コスト、名前、ファイルで検索 | ||
クイックソース | 現在のソースファイル | 次のように置き換えます。 |