Preventing caching of javascripts and css while developing

Question

I am currently developing and running my site from Visual Studio 2010. The site is launched in Google Chrome upon compiling.

Somewhere along the way, things are being cached. I can make a change to a javascript function, but unless i clear the cache in chrome, the old version of the script is being run.

I am running Visual Studio 2010 with .net 3.5 and the latest version of Google Chrome.

Is it possible to automatically load the latest script every time? I really don't want to add a ?parameter onto my script tag each time I save and compile. It's getting old having to clear the cache each time.

Thanks!

Andrei Андрей Листочкин · Accepted Answer · 2012-06-18 18:57:42Z

8

Open Chrome Dev Tools. In the bottom right corner there's a gear icon. Click it and click "Disable cache."

Also there's an option "Dock to right". Try it out, perhaps, you'll Like it!

edited Jun 18, 2012 at 18:57

answered Jun 18, 2012 at 18:50

Andrei Андрей Листочкин

8,5526 gold badges45 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

starbeamrainbowlabs · Accepted Answer · 2012-06-19 07:12:39Z

4

You could also get the server to add the following header to requests outgoing from the server:

cache-control:no-store, no-cache, must-revalidate, max-age=0

Also, you can start chrome with a command line flag that disables caching. To do this, create a new shortcut and type in the target box the following, replacing with your own username for your computer:

C:\Users\<username here>\AppData\Local\Google\Chrome\Application\chrome.exe --disk-cache-size=1 -media-cache-size=1

The flags have to be set to one, because 0 is unlimited. The numbers are in bytes.

Hope this helps.

Edit: To reload the page just once without the cache, press CTRL+SHIFT+R. This should work in all browsers.

edited Jun 19, 2012 at 7:12

answered Jun 18, 2012 at 18:59

starbeamrainbowlabs

6,23810 gold badges49 silver badges79 bronze badges

Comments

Jeremy · Accepted Answer · 2012-06-18 19:17:11Z

2

Simple method that I use is to either CTRL-F5 each time chrome is opened, OR, you can kill the local web server prior to running the app:

enter image description here

See list of chrome shortcuts for additional reading: Keyboard Shortcuts. Observe that CTRL-F5 as well as SHIFT-F5 will reload the current page while ignoring the cached content.

I typically use the above method instead of disabling cache alltogether (from chrome settings) because this is a localized case where I WANT to do away with the cache. All other situations (like normal browsing) I would prefer to keep the cache.

edited Jun 18, 2012 at 19:17

answered Jun 18, 2012 at 19:10

Jeremy

9,0402 gold badges39 silver badges44 bronze badges

Comments

Mike · Accepted Answer · 2012-06-18 18:51:04Z

0

You can always import the javascript source with some parameter:

<script type="text/javascript" src="../scripts/scriptFile.js?28361823"></script>

Most people use a getTimeInMillis() function to populate the request. This will bypass the cache (usually) and you'll get the newest data.

This will also force your users to get the javascript again, so be careful.

answered Jun 18, 2012 at 18:51

Mike

6114 silver badges12 bronze badges

Comments

hojjat.mi · Accepted Answer · 2017-01-05 06:02:40Z

0

If you want to prevent caching css or javascript files in browsers use random version id in your link. for example use this:

<link   href=<%="'mystyle.css?version="+ DateTime.Now.ToString("yyyyMMddhhmmss") +"'"%>   rel="stylesheet" type="text/css"/>

where myStyle.css is stylesheet file and DateTime.Now.ToString("yyyyMMddhhmmss") function used for generate random different version id.

answered Jan 5, 2017 at 6:02

hojjat.mi

1,57416 silver badges23 bronze badges

Comments

Onur Dikmen · Accepted Answer · 2023-11-15 09:03:16Z

Js and css version changes vary for many applications. You can check here for detailed information. https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control

You need to define a meta tag in Index.html, you can do this as follows. Using HTML:

You can add Header to each Ajax request.

     response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate"); // HTTP 1.1.
     response.setHeader("Pragma", "no-cache"); // HTTP 1.0.
     response.setHeader("Expires", "0"); //Proxies.

Using ASP.NET-MVC, you can add version to _Layout.cshtml as follows.

@{
          string versionId = DateTime.Now.ToString("yyyyMMddhhmmss");
  }
  <link href="~/assets/libs/toastr/nuget/content/content/toastr.min.css?version={@versionId}" rel="stylesheet" />
  <link href="~/assets/css/bootstrap.css?version={@versionId}" rel="stylesheet" />

Collectives™ on Stack Overflow

Preventing caching of javascripts and css while developing

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related