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