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
Click the Application tab to open the Application panel. The Manifest pane usually opens by default.
Figure 1. The Manifest pane. Expand the Cache Storage section to view available caches.
Figure 2. Available caches. Click a cache to view its contents.
Figure 3. Viewing the airhorner-0.6.11 cache. Click a resource to view its HTTP headers in the section below the table.
Figure 4. Viewing the HTTP headers of the /index.html resource. Click Preview to view a resource's content.
Figure 5. Viewing the content of the /scripts.comlink.global.js resource.
Refresh a resource
- View a cache's data.
Click the resource that you want to refresh. DevTools highlights it blue to indicate that it's selected.
Figure 6. Selecting the /styles/main.css resource. Click Refresh
.
Filter resources
- View a cache's data.
Use the Filter by Path text box to filter out any resources that do not match the path that you provide.
Figure 7. Filtering out resources that do not match the /scriptpath.
Delete a resource
- View a cache's data.
Click the resource that you want to delete. DevTools highlights it blue to indicate that it's selected.
Figure 8. Selecting the /styles/main.css resource. Click Delete Selected
.
Delete all cache data
- Open Application > Clear Storage.
Make sure that the Cache Storage checkbox is enabled.
Figure 9. The Cache Storage checkbox. Click Clear site data.
Figure 10. The Clear Site Data button.