Didn't make the #ChromeDevSummit this year? Catch all the content (and more!) in the Chrome Dev Summit 2019 playlist on our Chrome Developers YouTube Channel.

View Cache Data With Chrome DevTools

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. Click the Application tab to open the Application panel. The Manifest pane usually opens by default.

    The Manifest pane.
    Figure 1. The Manifest pane.

  2. Expand the Cache Storage section to view available caches.

    Available caches.
    Figure 2. Available caches.

  3. Click a cache to view its contents.

    Viewing a cache's contents.
    Figure 3. Viewing the airhorner-0.6.11 cache.

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

    Viewing a resource's HTTP headers.
    Figure 4. Viewing the HTTP headers of the /index.html resource.

  5. Click Preview to view a resource's content.

    Viewing a resource's content.
    Figure 5. Viewing the content of the /scripts.comlink.global.js resource.

Refresh a resource

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

    Selecting a resource.
    Figure 6. Selecting the /styles/main.css resource.

  3. Click Refresh Refresh.

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.
    Figure 7. Filtering out resources that do not match the /script 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.
    Figure 8. Selecting the /styles/main.css resource.

  3. Click Delete Selected Delete Selected.

Delete all cache data

  1. Open Application > Clear Storage.
  2. Make sure that the Cache Storage checkbox is enabled.

    The Cache Storage checkbox.
    Figure 9. The Cache Storage checkbox.

  3. Click Clear site data.

    The Clear Site Data button.
    Figure 10. The Clear Site Data button.

Feedback

Was this page helpful?
Yes
What was the best thing about this page?
It helped me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had the information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had accurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was easy to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
No
What was the worst thing about this page?
It didn't help me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was missing information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had inaccurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was hard to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.