I am modifying a site's appearance (CSS modifications) but can't see the result on Chrome because of annoying persistent cache. I tried Shift+refresh but it doesn't work.
How can I disable the cache temporarily or refresh the page in some way that I could see the changes?
The Chrome DevTools can disable the cache.
Right-click and choose Inspect Element to open the DevTools. Or use one of the following keyboard shortcuts:
F12
Control+Shift+i
Command+Shift+i
Click Network in the toolbar to open the network pane.
Check the Disable cache checkbox at the top.
Keep in mind, as a tweet from #ChromiumDev stated, this setting is only active while the devtools are open.
Note that this will result in all resources being reloaded. Should you desire to disable the cache only for some resources, you can modify the HTTP header that your server sends alongside your files.
If you do not want to use the Disable cache checkbox, a long press on the refresh button with the DevTools open will show a menu with the options to Hard Reload or Empty Cache and Hard Reload which should have a similar effect. Read about the difference between the options to know which option to choose. The following shortcuts are available:
Command+Shift+R on Mac
Control+Shift+R on Windows or Linux
Clearing the cache is too annoying when you need to clear the cache 30 times an hour.. so I installed a Chrome Extension called Classic Cache Killer that clears the cache on every page load.
Chrome Store Link (free)
(Now without malware!)
Now my mock json, javascript, css, html and data refreshes every time on every page load.
I never have to worry if I need to clear my cache.
There are about 20 cache cleaners for Chrome I found, but this one seemed lightweight and zero effort. In an update, Cache Killer can now stay "always on".
Note: I do not know the plugin author in any way. I just found it useful.
Pull up the Chrome developer console by pressing F12 and then (with the console open):
Right click (or hold left click) on the reload button at the top of the browser and select "Empty Cache and Hard Reload."
This will go beyond "Hard Reload" to empty the cache entirely, ensuring that anything downloaded via javascript or etc. will also avoid using the cache. You don't have to mess with settings or anything, it's a quick 1-shot solution.
There are two more options to disable page caching in Chrome for good:
1. Deactivate Chrome Cache in the Registry
Open Registry (Start -> Command -> Regedit)
Search for: HKEY_CLASSES_ROOT\ChromeHTML\shell\open\command
Change the part after ...chrom.exe" to this value: –disable-application-cache –media-cache-size=1 –disk-cache-size=1 — "%1"
Example: "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" -disable-application-cache –media-cache-size=1 –disk-cache-size=1 — "%1"
IMPORTANT:
there is a space and a hyphen after ...chrome.exe"
leave the path to chrome.exe as it is
If you copy the line, be sure to check, if the quotes are actual quotes.
2. Deactivate Chrome cache by changing the shortcut properties
Right-click on the Chrome icon and select "Properties" in the context menu.
Add following value to the path: –disk-cache-size=1
Example:
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" –disk-cache-size=1
IMPORTANT:
there is a space and a hyphen after ...chrome.exe"
leave the path to chrome.exe as it is
If you do not wish to edit Chrome's settings you may use incognito mode for the same results.
F12 to open Chrome DevTools
F1 to open DevTools Settings
Check Disable cache (while DevTools is open) as shown below:
This is currently on the Preferences tab which is the default. You may need to scroll down. This checkbox has been moved at least a couple times since this question was asked. Last I checked, it was in the middle column at the bottom. If you have it open on a thinner screen and there are 2 columns under Preferences, it may be near the top right. Feel free to update this post if it changes or comment and I'll update the post.
In addition to the disable cache option (which you get to via a button in the lower right corner of the developer tools window -- Tools | Developer Tools, or Ctrl + Shift + I), on the network pane of the developer tools you can now right click and choose "Clear Cache" from the popup menu.
Instead of hitting "F5"
Just hit:
"Ctrl + F5"
In the Canary Channel (and maybe the dev and stable channel will follow along) this is to be found as the second option overall on the left hand-side under the "General" section.
In addition to that, there is always the option to switch into Incognito Mode via Ctrl + Shift + N. Even though that unfortunately also ends your session.
To be clear, the disable cache checkbox in Chrome (v17 here, but since v15 I believe) is not in the main settings UI. It is in the developer tools settings UI.
From the browser window's wrench icon menu (prefs menu) choose Tools → Developer Tools
In the developer tools UI that appears, click the gear icon at bottom right.
Check the 'Disable cache' checkbox in the Network section.
Using Ctrl+Shift+R to refresh was nice but didn't get everything I needed.
still some things wouldn't refresh, such as data stored in js and css.
found a solution: a toolbar of google for chrome web developers. After you install the toolbar select options and "reset page".
Disable cache in chrome only works when you have dev tools open
Until the bug is fixed you could use Clear Cache Chrome plugin and you can also set a keyboard shortcut for it.
After installing it, right click and go to options:
Check Automatically reload active tab after clearing data:
Select Everything for Time Period:
And then you can go to Menu => Tools => Extensions:
Click on keyboard shortcuts at the bottom:
And set your keyboard shortcut, for example Ctrl + Shift +R:
Actually if you don't mind using the bandwidth it is more secure for multiple reasons to disable caching and advised by many security sites.
Chromium shouldn't be arrogant enough to make decisions and enforce settings on users.
You can disable the cache on UNIX with --disk-cache-dir=/dev/null.
As this is unexpected crashes may happen but if they do then that will clearly point to a more severe bug which should be fixed in any case.
This might help someone.
I have rigged my Nginx for crazy caching. Thus, disabling cache in network tools and explicitly clearing cache don't work.
A very simple yet boring workaround is, I just open a new Incognito Tab. Surprisingly it works, all the time!
A hard refresh in incognito mode does the trick anytime I wish to reload in the same mode.
When this question was asked, Chrome didn't support the Disable Cache feature. But now, you can find the "Disable Cache" feature in Network Tab in Chrome Dev Tools.
Network Tab with Cache Disabled
You can see that all the resources (I have filtered JS resources) have been fetched from network and not loaded from disk/memory cache.
Disable Cache not selected
You can see that when I refreshed the page but didn't select the "Disable Cache" feature, almost all the resources were loaded from Cache.
This works fine for local web development but there are certain limitations that I'd like to highlight. You can stop reading here if the solution discussed so far meets your use case.
Limitations
You have to keep the DevTools Open and Disable Cache Selected
When you disable the cache, it is disabled for all the resources in that tab. It makes things slow and is inefficient if you want to disable cache for only 1-2 resources
Using Requestly Chrome Extension to disable Cache for particular resources (JS/CSS/Images, etc)
Recently, I stumbled upon https://dev.to/requestlyio/disable-caching-of-particular-js-css-file-2k82 which helped me understand how you can disable cache for specific resources.
The trick here is to add a query parameter to your resource with random value every time the request is made. Using Requestly Query Param Rule, you can add a param like this
URL Contains mywebsite.com/myresource.js
Add param cb rq_rand(4)
rq_rand(4) is replaced by 4 digits random number when a request is made.
Requestly Query Parameter Rule to add random parameter
After adding the rule, JS/CSS files are not cached
Here you can see that "Disable Cache" is not selected and still the resources are not loaded from Cache because of a random parameter (cb - Read it as Cache buster) in the URL.
The good thing is you don't need to keep your dev tools open for having this behavior
You can keep this permanently ON and your browsing experience won't be affected too.
How to get the Rule
Here is the link using which you can browse & download the rule if you have Requestly installed - https://app.requestly.io/rules/#sharedList/1600501411585-disable-cache-stackoverflow
Disclaimer: I built Requestly but I think this could be helpful to a lot of web developers and hence sharing here.
How about a bookmarklet which changes the page name to prevent the page from cacheing. In Chrome you would create a new bookmark and then paste the code into the URL. Click the bookmark and the page will reload with timestamp to thwart the cache.
javascript:(function(){var idx = location.href.indexOf('?');var d = new Date();var str = location.href.substr(0,idx) + '?version=' + d.getTime();location.href=str; void 0;})();
I just got caught out but not necessarily due to Chrome.
I am using jQuery to make AJAX requests. I had the cache attribute set to true in the request:
$.ajax({
type: 'GET',
cache: true,
....
Setting this to false fixed my problem but this is not ideal.
I have no idea where this data is saved but I do know that chrome never hit the server for a request.
There is a better and quicker way now (Chrome version 59.x.x.):
Right-click onto the reload-icon (left of the url-field) and you get a drop-down menu, select the third option: 'empty Cache and Hard reload'.
This option is only available when the developer tools are open.
(Notice the difference to option 2: 'Hard reload' -cmd-shift-R). No cache emptying here!
There is a chrome extension available in the chrome web store named Clear Cache.
I use it every day and its a very useful tool I think. You can use it as a reload button and can clear the cache and if you like also cookies, locale storage, form data etc. Also you can define on which domain this happens. So can clear all this shit with only the reload button which you anyway have to press - on your chosen domains.
Very very nice!
You also can define a Keyboard Shortcut for this in the options!
Also another way is to start your chrome window in incognito-mode.
Here the cache also should be completely disabled.
One more option for disabling the cache is provided by my 3rd Chrome extension Page Size Inspector that disables the cache exactly the same way as Devtools does.
In addition, the extension quickly reports page size, cache usage, network requests and load time of a web page in a convenient way. Plus its open source at Github.
Not sure what you are using, but if you are using ASP.Net you can do the following which works like a charm:
<link href="#Url.Content("~/Content/Site.css")?time=#DateTime.Now" rel="stylesheet" />
Basically it will automatically append the Date and Time to the end of the file each time it is ran, meaning since the file name is technically different, you will never have to worry about it getting cached again.
I had the same problem, I tried :
Control Shift R,
Disable cache in F12
Control F5.
Then I discovered that using a .appcache manifest for a non https site is deprecated.
I removed my site.appcache file and its reference in the html tag and now I'm seeing the latest version of each page!
If you're using ServiceWorkers (e.g.: for Progressive web apps), you'll likely need to check "Update on reload" under Application > Service Workers in dev tools too.
Since version 50 (if I remember correctly), the "Disable cache" option was removed from the Devtool Settings. Go to the "Network" tab and there's the "Disable cache" option.
The problem with "annoying" cache in general layes in the framework :). Let's see details.
Most of frameworks uses in .htaccess (os equivalnent) derective redirecting all requests to frameworks "index",
BUT it the same time EXCLUDE files and directories requested by application directly.
(f.e. as for .htaccess typical directives are:
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule ^(.+)$ index.php?url=$1 [QSA,L]
)
Thus ALL .js, .css files as graphics ones are not handled by frameworks "index".
And those files are generally most often changed during development.
That's why the cache control derective should not be placed in frameworks "index".
It should be palced in .htaccess.
F.e. for development process use:
Header set Cache-Control "no-store, no-cache, must-revalidate"
Header set Pragma "no-cache"
(Or for consecutive working versions, use "Etag" directive - check more in HTTP reference. Notice, that ETag is not intended for development.
In .htaccess there is no direct way to generate random number (or fast changing sequence like date UTC) to use in ETag, because - as I mentioned before - this is not what this is provided for).
Hope it helps and saves time.
Hey if your site is using PHP then place following little PHP snippet at the beginning of your html page :
//dev versioning - stop caching
$rand = rand(1, 99999999);
Now everywhere you load resources like CSS- or JS- files in a script or link element you append your generated random value to the request URL after appending '?' to the URI via PHP:
echo $rand;
Thats it! There will be no browser that caches you site anymore - regardless which kind.
Of course remove your code before publishing or simply set $rand to an empty string to allow caching again.
I have used the other options described above but I find that the best is to add the following parameter to the startup of chrome.exe.
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disk-cache-size=1
-media-cache=1
I find not disabling media cache is a good idea but it is here for completeness sake.
In actuality I want an option to completely disable the cache, to use the memory for IO instead of my disk (which would make load time 10x faster too!) but I don't think chrome or any browser for that matter has that option yet.
How can I disable the cache temporarily or refresh the page in some way that I could see the changes?
It's unclear which "cache" you're referring to. There are several different methods a browser can cache content persistently. Web Storage being one of them, Cache-Control being another.
Some browsers also have a Cache, used in conjunction with Service Workers, to create Progressive Web Apps (PWAs) providing offline support.
To clear the cache for a PWA
self.caches.keys().then(keys => { keys.forEach(key => console.log(key)) })
to list the names of the cache keys, then run:
self.caches.delete('my-site-cache')
to delete a cache key by name (i.e., my-site-cache). Then refresh the page.
If you see any worker-related errors in the console after refreshing, you may also need to unregister the registered workers:
navigator.serviceWorker.getRegistrations()
.then(registrations => {
registrations.forEach(registration => {
registration.unregister()
})
})
Chrome's Cache killer is by far the best option. Since the store URL to install cache killer is down, you can download the CRX file here:
https://www.crx4chrome.com/extensions/jpfbieopdmepaolggioebjmedmclkbap/
once the extension file is downloaded, open Chrome -> more tools -> extensions, then drag the CRX file from the File Explorer or your Desktop (depending the location where you downloaded the file) into the chrome window to install the extension.
Related
Is it possible to modify the JavaScript of a page and then reload the page without reloading the modified JavaScript file (and thus losing modifications)?
This is a bit of a work around, but one way you can achieve this is by adding a breakpoint at the start of the javascript file or block you want to manipulate.
Then when you reload, the debugger will pause on that breakpoint, and you can make any changes you want to the source, save the file and then run the debugger through the modified code.
But as everyone has said, next reload the changes will be gone - at least it lets you run some slightly modified JS client side.
Great news, the fix is coming in March 2018, see this link: https://developers.google.com/web/updates/2018/01/devtools
"Local Overrides let you make changes in DevTools, and keep those changes across page loads. Previously, any changes that you made in DevTools would be lost when you reloaded the page. Local Overrides work for most file types
How it works:
You specify a directory where DevTools should save changes. When you
make changes in DevTools, DevTools saves a copy of the modified file
to your directory.
When you reload the page, DevTools serves the
local, modified file, rather than the network resource.
To set up Local Overrides:
Open the Sources panel.
Open the Overrides tab.
Click Setup Overrides.
Select which directory you want to save your changes to.
At the top of your viewport, click Allow to give DevTools read and write access to the directory.
Make your changes."
UPDATE (March 19, 2018): It's live, detailed explanations here: https://developers.google.com/web/updates/2018/01/devtools#overrides
The Resource Override extension allows you to do exactly that:
create a file rule for the url you want to replace
edit the js/css/etc in the extension
reload as often as you want :)
In the devtools preferences check the Enable local overrides.
Go to network tab, find the file you want to edit, rigth click on it and select Save for overrides (on the sources/overrides tab you need to add a local folder)
The file appears in a new tab on the Sources tab as local copy, so you can edit this file, and after site reload the new (and edited) override file will load on the site!
I know it's not the asnwer to the precise question (Chrome Developer Tools) but I'm using this workaround with success: http://www.telerik.com/fiddler
(pretty sure some of the web devs already know about this tool)
Save the file locally
Edit as required
Profit!
Full docs: http://docs.telerik.com/fiddler/KnowledgeBase/AutoResponder
PS. I would rather have it implemented in Chrome as a flag preserve after reload, cannot do this now, forums and discussion groups blocked on corporate network :)
Yes you can eazily!
Source -> filesystem -> choose the conatainer folder -> allow access -> open your file, edit and save.
https://www.delftstack.com/howto/javascript/edit-javascript-in-the-browser/
TL;DR I'd like to make chrome's state as though it had never, ever visited a certain url before.
Longer version:
I'm working on an application, and have a complicated problem regarding XSS vulnerabilities, which could be caused by the browser 'remembering' something about a previous session which could cause nonces to not match. The upshot is that I need to be absolutely sure that when I visit the app url that chrome hasn't 'remembered' anything about it from any previous session(s).
Here's what I've tried:
Firstly, visiting: chrome://settings/cookies/detail?site=example.com and deleting all the cookies
Secondly, visiting: chrome://settings/clearBrowserData and deleting everything (unfortunately, this doesn't seem to be possible for one url at a time?)
I can prove that chrome has not completely 'forgotten' the site. The proof is complicated, but basically if I place a different app (with different flavicon) at the url, visit the url, then close out that tab, then complete the steps above to clear browser data and cookies (at this point chrome should have forgotten everything). Yet when I put a different app at the same url and visit the url, chrome uses the old app's flavicon, which (I think) proves that it hasn't completely forgotten everything it knew about the url!
So, that's the long version. But, the TL;DR is to simply make it as though chrome had never visited a site (preferably without altering data stored for other sites, or doing anything extreme like completely uninstalling/reinstalling)
A third attempt
To empty cache and hard reload, press cmd + opt + j to bring up the developer console, then right click on refresh and select 'Empty Cache and Hard Reload'. Yet the old flavicon still remains, indicating that not all info from that site was removed.
After about 2 hours, I figured the following techniques to try to remove the flavicon, but even after all of the following steps, as the flavicon from a previous app still remains in Chrome's 'memory'!
Do the first two steps from the question:
visit: chrome://settings/cookies/detail?site=example.com and delete all the cookies (replace example.com with the url in question)
visit: chrome://settings/clearBrowserData and deleting everything (would be great to know how to do this for a single site)
Right click on the tiny icon to the immediate left of the url (it will be a lock if using https, or the letter 'i' if using http).
Go into each of categories listed (e.g. 'Cookies', 'Site Settings' etc) and delete them all
Note
I didn't find a solution for removing all data from chrome, however, I found you can start a completely isolated chrome session with these instructions
I made some changes to my CSS file. I can see the new version on any browser but firefox. Why is that?
Thanks!
This might be caused by cache. Possible solutions to your problem are available here: https://support.mozilla.org/en-US/questions/1147504; the accepted answer at the website is:
One way to check whether this is a problem with stored data in Firefox
is to test in a new private window. When you launch the first private
window in a regular browsing session, it has an empty cache and empty
cookie jar and should give you a clean retrieval of the current site.
If you still get old data, the problem is external to Firefox, for
example, a proxy server or ISP cache.
Close all the private windows if you want to test again, since they
share a temporary cache and cookie jar until the last one is closed.
You can also try to reload the page as mentioned below (this bypasses the current cache) (source: https://support.mozilla.org/bm/questions/967500):
Reload web page(s) and bypass the cache to refresh possibly outdated
or corrupted files.
Hold down the Shift key and left-click the Reload button
Press "Ctrl + F5" or press "Ctrl + Shift + R" (Windows,Linux)
Press "Command + Shift + R" (Mac)
As for open an URL upon my extension has been uninstalled, I found the easiest way to do is using chrome.runtime.setUninstallURL, (1) any other good ways?
As for open an URL upon my extension has been first time installed, I don't find something like chrome.runtime.setInstallURL, I implemented the feature with
chrome.runtime.onInstalled.addListener(function(details){
if (details.reason=="install"){chrome.tabs.create({ url: homePage});}
})
I saw AdBlock opens its options page upon first time installed, but it doesn't even used chrome.runtime.onInstalled, its source code is so much complicated , I cannot figure out how it implement the feature ,(2) how it do it ? any other ways to open an URL or its options page upon the extension has been first time installed?
(3) what are the common ways to do something when an extension has been installed or uninstalled?
SetUninstallURL seems to be specifically designed for your task, so it's certainly the right way.
Regarding the installation page, not sure how AdBlock does it, but if you have a persistent background page, one of the simpler ways would be to show the page on every launch if a certain localStorage key is not set.
// background.html startup, for example DOMContentLoaded handler
if ( !localStorage.getItem('intro_shown') ) {
localStorage.setItem('intro_shown', true);
showIntroPage();
}
Local storage of the extension's background page will be persistent, apart from several corner cases (incognito mode in FF, etc).
Upd by Makyen:
chrome.storage seems to be a much better option specifically designed for extension storage needs. It could also be automatically synced with Chrome sync (using chrome.storage.sync)
I am on Chrome Dev 27, and in the Dev Tools settings checked Disable cache. When I reload a page, Chrome properly reloads all the resources used by map page, including the .js files. However, it doesn't automatically reload the corresponding source maps .map. Monitoring the HTTP traffic between Chrome my app, on subsequent page load, I don't see any request from Chrome for the .map files. How can I get Chrome to also reload the source maps?
The issue with Chrome not reloading the .map file is that it also won't reload the file from which the .js was generated, which in my case happens to be a CoffeeScript file (.coffee), which means that when debugging, in the Sources tab I am looking at an old version of the .coffee file, even if the new code (from the .js) is running.
I had this same issue just today. The wait to solve it for me was to close the coffee file's tab under sources, go to the network tab, right click, and select "Clear Browser Cache"
This fixed it for me.
That said, the mapped files don't always get "stuck" in cache for me... Only sometimes, and when they do, the clear cache trick fixes it.
Just had the same issue and found some additional solutions:
According to this commit and this bug report for chromium, the problem is solved and should not affect one of the next builds.
A little bit simpler solution for this problem than clearing the whole Browser Cache:
Open the source map in a browser tab and do a hard reload (depending on OS, try CTRL+F5). This refreshes the file and keeps the browser cache.
An alternate way and perhaps a good practise is to hack the source map generation by adding a parameter like ?build=12345. Refer to your build tool on how to manipulte the filename of the source map.
If you have access to the server config or a .htaccess, you could set the header Cache-Control: no-cache for the source map extension like '.js.map'.
Go to settings -> Show advanced settings -> Clear Browsing Data -> Check only "cached images and files" -> Click "clear browsing data"
This will clear the source maps you have cached in the browser without deleting all the cookies.
I resolved the issue by deleting the .map file and performing a hard reload (CTRL-F5).
I didn't want to lose all my history!