CODEWITHSUNDEEP
google-chrome-devtools
bmbigbang
bmbigbang

Reputation: 1398

chrome cache removal for single files

recently I had to remove my entire cache to be able to view a webpage I was working on. This is fine I guess but it could be improved by removing specific pages from the cache. the chrome.browsingData.remove, seemingly has no option for indicating individual pages for removal. I was wondering if this could be done externally, but I am not familiar with the chromium code. I was also wondering if there are any planned changes to the chrome.browsingData.remove implementation. Many thanks

Upvotes: 32

Views: 16688

Answers (6)

DAB
DAB

Reputation: 1873

To remove all files (not single files) while in Chrome DevTools you should click on the Dev Tools settings then choose "Disable cache (while DevTools is open)". This was the first option on the page - it is now (as of Chrome 103 in 2022) under network in Preferences.

Note that these settings are not the main Chrome settings, but are specific to Dev Tools.

You can reach DevTools by pressing F12 while on a web page you want to debug or by pressing Ctrl-Shift-I.

Edited 28 July 2022

Upvotes: 3

bmbigbang
bmbigbang

Reputation: 1398

Edit 10/Feb/2022: Access the remote dev tools documentation for a whole suit of tools available to override cached files while developing: https://developer.chrome.com/docs/devtools/storage/cache/

If you are attempting to clear HTTP cached data, which was the original question in the post, then the network log is where it is possible. the guide for that is here: https://developer.chrome.com/docs/devtools/network/#load

First find the file then release its cacged content by right clicking: https://developer.chrome.com/docs/devtools/network/reference/#clear-cache

Upvotes: 4

Ido Green
Ido Green

Reputation: 2813

If you are working on a webpage and wish to avoid caching (btw, it's recommended! :) You can do it today in Chrome DevTools. Go to Settings (the icon in the bottom-right corner) and click on it. Then, you will have an option 'disable cache' - mark it and you done.

Just don't forget to return this state when you done working as chrome will be faster with its caching schema.

Upvotes: 11

Aakash
Aakash

Reputation: 23835

UPDATE : 2019, April 20

Lately, I'm working with Chrome browser's inbuilt feature - Overrides. With this feature, we can write code for HTML, CSS, JS, etc directly in the console and see it on the web-page.

Here's a tutorial that might be helpful

Previous Answer :

I'm working with Google Chrome extension Resource Override.

After installing this extension, I'm overriding the resource which I want from the server instead of cache:

STEP #2 : Override the resource which you want fresh from the server:

enter image description here

⭐Important Note - Access the plugin from the developer-console instead of the browser

⭐⭐ I started with this approach but have moved to approach suggested by Lukas Greblikas in the answer above.

Good Luck...

Upvotes: 1

Chris Nitchie
Chris Nitchie

Reputation: 557

If you're building the page dynamically, then during development, you can put a random string at the end of the URL used to load the script.

<script src="path/to/script.js?_=<%=Math.random()%>"></script>

This will cause a cache miss for that file but will use the cache for everything else (subject to cache-control headers and so on). Just remember to remove the parameter before pushing to prod!

Upvotes: 2

Lukas Greblikas
Lukas Greblikas

Reputation: 669

To remove a single file cache enter its URL into browser and do hard refresh.

Upvotes: 19

Related Questions