概要
あるWebページでネットワーク越しに読み込んでいるファイルを調べる際、開発者ツールのネットワークタブを利用することが多いと思います。
その際、ネットワークタブにはアクセス解析や広告など調査のノイズになるファイルが大量に記録されます。
特定のFQDN配下のURLのみを抽出すると便利な場面もありますが、クエリにURLが含まれるなど、ネットワークタブのフィルタでは機能が足りない場合があります。
ここで紹介するのはその場合の抽出方法です。
説明の前提
- Windows 11を使用している。Windows10、Macでも可能だと思うがこの記事ではWindows 11で説明します。
- Google Chromeを使用できる。
- サクラエディタ・Visual Studio Codeなど正規表現での置換が可能なエディタを使用できる。JSが分かる人なら開発者ツールのコンソールでも可能だと思います。
やり方
-
Google Chromeを開く。
-
開発ツールを起動する。
-
調査したいページを開く。
-
ページのロード完了後、開発者ツールで下記のキャプチャを参考に「fetchとしてすべてコピーを」選択をクリックする。
-
コピーしたfetch文をエディタの新しいファイルにペーストする。
-
URLを含む行以外は要らないため、エディタで以下の正規表現の「example.com」の箇所を当該のFQDNに差し替えて検索し、空白に置換する（つまり、一致した箇所を削除する）。
^(?!fetch\("https?://example\.com).+$\r?\n
「.」は正規表現では任意を一文字を表すので「\.」と記載してエスケープを忘れずに。漏れても支障のないケースが多いので罠になるかもしれません。
テスト系のURLも含めて抽出するケースも場合によっては可能。例えば「test.example.com」も抽出したい場合は
example\.com を (test\.)?example\.com と書く
7. 最後にfetch文からURLを抽出する。以下の正規表現で一致した行をキャプチャグループの1番目「$1」で置換する。そうすればエディタには改行区切りのURLのみが残る。
^fetch\("(https?://example\.com[^"]+).*$
URL中のダブルクォーテーションはエンコードされるのでこれで問題ないはず。私は困ったことないです。
クエリやハッシュは残るので、必要に応じて [?#].+$ で検索して削除するといいです。
余談
否定先読みのようにやや難しめの表現を使わずに済ませたかったが、[^(...)]とかのやり方では思いつけなかった。