Disabling Chrome cache for website development

 

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.

  • F12 or Right-click and Inspect Element to open the DevTools.
  • Now click Network in the toolbar to open the network pane.
  • Finally, check the Disable cache checkbox at the top.

    • 开发工具面板的截图

    Keep in mind, and as a tweet from @ChromiumDev stated, this setting is only active while devtools is open .

    在这里输入图像描述

    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.

    链接地址: http://www.djcxy.com/p/3456.html

    上一篇: 在打印预览模式下使用Chrome的元素检查器？

    下一篇: 禁用Chrome缓存以进行网站开发