このガイドでは、Chrome DevTools を使用してキャッシュ データを調べる方法について説明します。
HTTP キャッシュ データを検査する場合、このガイドは必要ではありません。ネットワーク ログの [Size] 列に必要な情報が含まれています。ネットワーク アクティビティをログに記録するをご覧ください。
キャッシュ データを表示する
DevTools > [アプリケーション] > [ストレージ] を開きます。
使用可能なキャッシュを表示するには、[ キャッシュ ストレージ] を開きます。
キャッシュをクリックすると、そのコンテンツが表示されます。
リソースをクリックすると、表の下のセクションに HTTP ヘッダーが表示されます。
[プレビュー] タブを開いて、リソースの内容を表示します。
リソースを更新する
- キャッシュのデータを表示する。
更新するリソースを選択します。選択されると、DevTools では青色でハイライト表示されます。
[更新更新] をクリックします。
リソースのフィルタ
- キャッシュのデータを表示する。
- [パスでフィルタ] テキスト ボックスを使用して、指定したパスに一致しないリソースを除外します。
この例では、パスに script
を含まないリソースを除外します。
リソースの削除
- キャッシュのデータを表示する。
削除するリソースをクリックします。選択されると、DevTools では青色でハイライト表示されます。
[選択項目を削除] をクリックします。
すべてのキャッシュ データを削除する
- [アプリケーション] > [ストレージ] を開きます。
[キャッシュ] セクションで、 [キャッシュ ストレージ] が有効になっていることを確認します。
[サイトデータを消去] をクリックします。