Skip to main content

Return to Answer

Updated article link as the medium article link is not latest version
Source Link
Sachin Jain
Sachin Jain
  • 21.9k
  • 34
  • 113
  • 177

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

Screenshot - Disable Cache Feature in Chrome Dev Tools

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

enter image description here

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

  1. You have to keep the DevTools Open and Disable Cache Selected
  2. 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-84a93d005172https://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

enter image description here

After adding the rule, JS/CSS files are not cached

Requestly Rule applied and added a random parameter to disable cache

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.

  1. The good thing is you don't need to keep your dev tools open for having this behavior
  2. 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.

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

Screenshot - Disable Cache Feature in Chrome Dev Tools

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

enter image description here

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

  1. You have to keep the DevTools Open and Disable Cache Selected
  2. 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

enter image description here

After adding the rule, JS/CSS files are not cached

Requestly Rule applied and added a random parameter to disable cache

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.

  1. The good thing is you don't need to keep your dev tools open for having this behavior
  2. 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.

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

Screenshot - Disable Cache Feature in Chrome Dev Tools

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

enter image description here

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

  1. You have to keep the DevTools Open and Disable Cache Selected
  2. 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

enter image description here

After adding the rule, JS/CSS files are not cached

Requestly Rule applied and added a random parameter to disable cache

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.

  1. The good thing is you don't need to keep your dev tools open for having this behavior
  2. 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.

deleted 63 characters in body
Source Link
Sachin Jain
Sachin Jain
  • 21.9k
  • 34
  • 113
  • 177

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.

Screenshot of NetworkNetwork Tab with Cache Disabled

Screenshot - Disable Cache Feature in Chrome Dev Tools

You can see that all the resources (I have filtered JS resources) have been fetched from network and not loaded from disk/memory cache.

Screenshot - DisableDisable Cache not selected

enter image description here

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

  1. You have to keep the DevTools Open and Disable Cache Selected
  2. 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

Solution - UsingUsing 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.

Screenshot - RequestlyRequestly Query Parameter Rule to add random parameter

enter image description here

Screenshot - AfterAfter adding the rule, JS/CSS files are not cached

Requestly Rule applied and added a random parameter to disable cache

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.

  1. The good thing is you don't need to keep your dev tools open for having this behavior
  2. 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.

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.

Screenshot of Network Tab with Cache Disabled

Screenshot - Disable Cache Feature in Chrome Dev Tools

You can see that all the resources (I have filtered JS resources) have been fetched from network and not loaded from disk/memory cache.

Screenshot - Disable Cache not selected

enter image description here

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

  1. You have to keep the DevTools Open and Disable Cache Selected
  2. 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

Solution - 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.

Screenshot - Requestly Query Parameter Rule to add random parameter

enter image description here

Screenshot - After adding the rule, JS/CSS files are not cached

Requestly Rule applied and added a random parameter to disable cache

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.

  1. The good thing is you don't need to keep your dev tools open for having this behavior
  2. 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.

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

Screenshot - Disable Cache Feature in Chrome Dev Tools

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

enter image description here

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

  1. You have to keep the DevTools Open and Disable Cache Selected
  2. 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

enter image description here

After adding the rule, JS/CSS files are not cached

Requestly Rule applied and added a random parameter to disable cache

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.

  1. The good thing is you don't need to keep your dev tools open for having this behavior
  2. 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.

Stack Overflow is like an encyclopedia, so we prefer to omit these types of phrases. It is assumed that everyone here is trying to be helpful.
Source Link
Dharman ♦
Dharman ♦
  • 34k
  • 27
  • 106
  • 158

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.

Screenshot of Network Tab with Cache Disabled

Screenshot - Disable Cache Feature in Chrome Dev Tools

You can see that all the resources (I have filtered JS resources) have been fetched from network and not loaded from disk/memory cache.

Screenshot - Disable Cache not selected

enter image description here

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

  1. You have to keep the DevTools Open and Disable Cache Selected
  2. 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

Solution - 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.

Screenshot - Requestly Query Parameter Rule to add random parameter

enter image description here

Screenshot - After adding the rule, JS/CSS files are not cached

Requestly Rule applied and added a random parameter to disable cache

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.

  1. The good thing is you don't need to keep your dev tools open for having this behavior
  2. 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. Hope it helps!

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.

Screenshot of Network Tab with Cache Disabled

Screenshot - Disable Cache Feature in Chrome Dev Tools

You can see that all the resources (I have filtered JS resources) have been fetched from network and not loaded from disk/memory cache.

Screenshot - Disable Cache not selected

enter image description here

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

  1. You have to keep the DevTools Open and Disable Cache Selected
  2. 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

Solution - 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.

Screenshot - Requestly Query Parameter Rule to add random parameter

enter image description here

Screenshot - After adding the rule, JS/CSS files are not cached

Requestly Rule applied and added a random parameter to disable cache

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.

  1. The good thing is you don't need to keep your dev tools open for having this behavior
  2. 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. Hope it helps!

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.

Screenshot of Network Tab with Cache Disabled

Screenshot - Disable Cache Feature in Chrome Dev Tools

You can see that all the resources (I have filtered JS resources) have been fetched from network and not loaded from disk/memory cache.

Screenshot - Disable Cache not selected

enter image description here

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

  1. You have to keep the DevTools Open and Disable Cache Selected
  2. 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

Solution - 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.

Screenshot - Requestly Query Parameter Rule to add random parameter

enter image description here

Screenshot - After adding the rule, JS/CSS files are not cached

Requestly Rule applied and added a random parameter to disable cache

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.

  1. The good thing is you don't need to keep your dev tools open for having this behavior
  2. 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.

Source Link
Sachin Jain
Sachin Jain
  • 21.9k
  • 34
  • 113
  • 177