View cache data

Sofia Emelianova
Sofia Emelianova

This guide shows you how to useChrome DevToolsto inspectCachedata.

If you're trying to inspectHTTP cachedata, this is not the guide you want. TheSize column of theNetwork Loghas the information you're looking for. SeeLog network activity.

View cache data

  1. Open DevTools>Application>Storage.

  2. To view available caches, expandExpand.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 thePreviewtab 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. ClickRefreshrefresh.

Filter resources

  1. View a cache's data.
  2. Use theFilter by Pathtext 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 containscriptin 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. ClickDelete SelectedDelete selected..

Delete all cache data

  1. OpenApplication>Storage.
  2. In theCachesection, make sureCheckbox.Cache Storageis enabled.

  3. ClickClear site data.

    The Cache Storage checkbox and the Clear site data button.