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