Disabling Chrome cache for website development

Question

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

User · Answer

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.

User · Answer

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

User · Answer

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

User · Answer

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 Command Option i on Mac Control Shift i on Windows or Linux   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 Option R on Mac Control Shift R on Windows or Linux

User · Answer

Disable cache in chrome only works when you have dev tools open

User · Answer

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

User · Answer

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

User · Answer

Not sure what you are using  but if you are using ASP Net you can do the following which works like a charm    lt link href   Url Content    Content Site css   time  DateTime Now  rel  stylesheet    gt    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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

When this question was asked  Chrome didn t support the Disable Cache feature  But now  you can find the  quot Disable Cache quot  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  quot Disable Cache quot  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   medium com weekly-webtips how-to-disable-caching-of-particular-js-css-file-84a93d005172 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  quot Disable Cache quot  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  amp  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

User · Answer

Instead of hitting  F5  Just hit       Ctrl   F5

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

I use  in windows   ctrl   shift   delete and when the chrome dialog comes up  press enter key  This can be configured with what needs to be cleared each time you execute this sequence  No need to have dev  tools open in this case

User · Answer

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

User · Answer

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

User · Answer

Add this string of code to your  and it should do the trick    lt meta name  robots  content  noarchive  gt

User · Answer

If you do not wish to edit Chrome s settings you may use incognito mode for the same results

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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   gt    keys forEach key   gt  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   gt        registrations forEach registration   gt          registration unregister

User · Answer

I was in a situation that the browser load the cache data from disk even I checked it disabled cache  I was using Chrome   All my CSS and JS were loading from server but not the web page  This was happening on both my local and Production   To fixed it  I need to put an extra param in my URL to force the browser to get the web page from server  even the controller did not need it   I was using ASP Net  so here is my example      Controller function public ActionResult Index                 return View            Link  Html Action  Index    Home   new   ts   DateTime Now Ticks ToString       The result is  it will generate a link like   http   www myweb com Home Index ts 636558555408282209  This is my situation and solution  Hopefully it could help somebody

User · Answer

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

User · Answer

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

[google-chrome] Disabling Chrome cache for website development

Examples related to google-chrome

Examples related to caching

Examples related to browser

Examples related to google-chrome-devtools

Examples related to browser-cache