キャッシュ データを表示する

Kayce Basques
Kayce Basques
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

このガイドでは、Chrome DevTools を使用してキャッシュ データを検査する方法について説明します。

HTTP キャッシュ データを検査しようとしている場合は、このガイドは適していません。ネットワーク ログの [サイズ] 列に、必要な情報が表示されます。ネットワーク アクティビティのログを記録するをご覧ください。

キャッシュデータを表示する

  1. DevTools を開く > [Application] > [Storage] を選択します。

  2. 使用可能なキャッシュを表示するには、展開 [キャッシュ ストレージ] を開きます。

    使用可能なキャッシュ。

  3. キャッシュをクリックして内容を表示します。

    キャッシュの内容を表示する。

  4. リソースをクリックすると、表の下の欄に HTTP ヘッダーが表示されます。

    リソースの HTTP ヘッダーの表示。

  5. [プレビュー] タブを開いて、リソースのコンテンツを表示します。

    リソースのコンテンツを表示する。

リソースを更新する

  1. キャッシュのデータを表示する。

  2. 更新するリソースを選択します。DevTools では、選択されていることを示すために青色でハイライト表示されます。

    リソースの選択。

  3. [更新] をクリックします。

リソースのフィルタ

  1. キャッシュのデータを表示する。
  2. [パスでフィルタ] テキスト ボックスを使用して、指定したパスと一致しないリソースを除外します。

指定されたパスと一致しないリソースを除外します。

この例では、パスに script が含まれていないリソースを除外します。

リソースの削除

  1. キャッシュのデータを表示する。

  2. 削除するリソースをクリックします。DevTools では、選択されていることを示すために青色でハイライト表示されます。

    削除するリソースを選択する。

  3. [選択したアイテムを削除] 選択したアイテムを削除します。 をクリックします。

キャッシュデータをすべて削除する

  1. [アプリ] > [ストレージ] を開きます。

  2. [キャッシュ] セクションで、チェックボックス。 [キャッシュ ストレージ] が有効になっていることを確認します。

  3. [サイトデータを消去する] をクリックします。

    [キャッシュ ストレージ] チェックボックスと [サイトデータを消去] ボタン。