View cache data

Sofia Emelianova
Sofia Emelianova

This guide shows you how to use Chrome DevTools to inspect Cache data.

If you're trying to inspect HTTP cache data, this is not the guide you want. The Size column of the Network Log has the information you're looking for. See Log network activity.

View cache data

  1. Open DevTools > Application > Storage.

  2. To view available caches, expand Expand. Cache Storage.

    Available caches.

  3. Click a cache to view its contents.

    Viewing a cache's contents.

  4. Click a resource to view its HTTP headers in the section below the table.

    Viewing a resource's HTTP headers.

  5. Open the Preview tab to view a resource's content.

    Viewing a resource's content.

Refresh a resource

  1. View a cache's data.
  2. Select the resource that you want to refresh. DevTools highlights it blue to indicate that it's selected.

    Selecting a resource.

  3. Click Refreshrefresh.

Filter resources

  1. View a cache's data.
  2. Use the Filter by Path text box to filter out any resources that do not match the path that you provide.

Filtering out resources that do not match the specified path.

This example filters out resources that don't contain script in their path.

Delete a resource

  1. View a cache's data.
  2. Click the resource that you want to delete. DevTools highlights it blue to indicate that it's selected.

    Selecting a resource to delete.

  3. Click Delete Selected Delete selected..

Delete all cache data

  1. Open Application > Storage.
  2. In the Cache section, make sure Checkbox. Cache Storage is enabled.

  3. Click Clear site data.

    The Cache Storage checkbox and the Clear site data button.