Overview Open Chrome DevTools What's New In DevTools DevTools Engineering Get Started With Viewing And Changing The DOM Find Unused JavaScript And CSS With The Coverage Tab Find and fix problems with the Issues tab Run commands in the Command Menu View and debug media players information Emulate authenticators and debug WebAuthn Edit files with Workspaces Debug Progressive Web Apps Understand security issues Keyboard shortcuts View page resources
Overview Open Chrome DevTools What's New In DevTools DevTools Engineering Get Started With Viewing And Changing The DOM Find Unused JavaScript And CSS With The Coverage Tab Find and fix problems with the Issues tab Run commands in the Command Menu View and debug media players information Emulate authenticators and debug WebAuthn Edit files with Workspaces Debug Progressive Web Apps Understand security issues Keyboard shortcuts View page resources

View Cache data

Published on

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.

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.