Chrome Tip – Disable Caching When Developer Tools On For Troubleshooting

Browser caching, when enabled, saves elements of a web page such as images, the CSS stylesheet files, to local storage so that when the same page gets visited by the same visitor next time the page will load faster. It’s also a key element that determines how faster your website is when using speed testing services such as Google’s PageSpeed Insight or GTmetrix.

But, it could also be pretty difficult to deal with to web developers at the same time. You may wonder why the web page shown in the browser doesn’t reflect the changes you made in the code. Normally, you could just press Shift+F5 to force the browser to forget about what’s in the cache and redownload whatever on the web page from the server, which works probably 90% of the times but not all the time.

Here is a quick tip that could be very handy if you are a web developer using Chrome.

Press Ctrl + Shift + I or F12 to open Developer Tools, and click the more options button and select Settings (or simply press F1 if you are on Windows)

Chrome - Developer Tools - Settings

Under General tab, check the option Disable cache (while DevTools is open). The change gets saved automatically and is going to affect all websites moving forward.

Start-2016-02-19 14_32_57

Since the cache is only disabled when the Developer Tools console is open it doesn’t affect the browsing performance when you surf the web.

Leave a Reply

Your email address will not be published.