<p>So, I have a script called "engine", and after much headbashing and (futile) debugging, I've found out that GC simply isn't reloading it!</p> <p>This is how I include it in the webpage (inside the <code><head></code> element):</p> <pre class="prettyprint"><code><script type="text/javascript" src="engine.js"></script> </code></pre> <p>When a put 10 <code>console.log("asdf");</code>'s at the start of the script, it's like they aren't there. When I went to the "resources" tab in the GC console, I saw that no changes are being applied whatsoever to that script! Hlep? Would putting a <code>+ "?" + new Date()</code> at the end help?</p>

<p>The universal solution that works in Chrome, Firefox and IE is cleaning the cache via <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Del</kbd> (on Mac <kbd>⌘</kbd>+<kbd>Shift</kbd>+<kbd>⌫</kbd>).</p> <h3>Chrome solution #1</h3> <ol> <li>Open Developer Tools (<kbd>F12</kbd> or <kbd>⌘</kbd>+<kbd>⌥</kbd>+<kbd>i</kbd>, or right-click → <strong>Inspect</strong>).</li> <li>Select the <strong>Network</strong> tab and tick the <strong>Disable cache</strong> checkbox.</li> </ol> <p><img src="https://i.stack.imgur.com/9ZGTo.png" alt="Chrome disable cache - Network tab"></p> <ol start="3"> <li>Reload the page.</li> </ol> <p><sup>❗️<em>Note</em>: The cache will be disabled <em>only</em> when the devtools window is open.</sup></p> <h3>Chrome solution #2</h3> <blockquote> <p><sup>This only makes sense if #1 is not used.</sup></p> </blockquote> <ol> <li>Open Developer Tools.</li> <li>Click the <strong>Settings</strong> cogwheel icon in the bottom right corner.</li> <li>In the dialog that appears, select under the <strong><em>Network</em></strong> subsection the <strong>Disable cache</strong> checkbox: from now on the cache will be skipped when the devtools window is open. When the devtools windows is closed caching will work as usual.</li> </ol> <p><img src="https://i.stack.imgur.com/t2wiz.png" alt="Chrome disable cache in devtools settings"></p> <h3>Chrome solution #3: empty cache + hard reload</h3> <ol> <li>Open Developer Tools (otherwise the menu in the next step won't show).</li> <li>Click and hold down the <strong>Refresh</strong> button, and then select from the dropdown <strong>Empty Cache and Hard Reload</strong>.</li> </ol> <p><img src="https://i.stack.imgur.com/E6iGF.png" alt="Chrome Hard Refresh and Cache Reset"></p> <h3>Modifying javascript code</h3> <p>A browser-agnostic solution which could be used for debugging is to append in your server-side code a randomly-generated version string as a query parameter, i.e. call your script as:</p> <p><code><script type="text/javascript" src="myscript.js?ver=12345"></script></code></p> <p>This trick will force the browser to reload the script when the value of the <code>ver</code> parameter changes. If you make ajax requests then you can append <code>"?ver=" + new Date().getTime()</code> to your URL.</p> <blockquote> <p><sub>NOTE: Don't forget to remove the parameter when you are finished debugging because in production you most likely <strong>do</strong> want the scripts to be cached. It is a common practice though to generate a new timestamp on each new build — this can be used in production, and will ensure that after a new deployment the clients will always get the updated scripts.</sub></p> </blockquote> <hr> <blockquote> <p><sub>Unlike all the above solutions this one will work even when you have some sort of caching (e.g. redis, memcached, varnish) or CDN (e.g. akamai, cloudflare, cloudfront, etc) between the client and the server.</sub></p> </blockquote>

Why isn't Google Chrome reloading my scripts?

Tags:

javascript

html

google-chrome

So, I have a script called "engine", and after much headbashing and (futile) debugging, I've found out that GC simply isn't reloading it!

This is how I include it in the webpage (inside the <head> element):

<script type="text/javascript" src="engine.js"></script>

When a put 10 console.log("asdf");'s at the start of the script, it's like they aren't there. When I went to the "resources" tab in the GC console, I saw that no changes are being applied whatsoever to that script! Hlep? Would putting a + "?" + new Date() at the end help?

499

asked Apr 06 '12 15:04

corazza

2 Answers

The universal solution that works in Chrome, Firefox and IE is cleaning the cache via Ctrl+Shift+Del (on Mac ⌘+Shift+⌫).

Chrome solution #1

Open Developer Tools (F12 or ⌘+⌥+i, or right-click → Inspect).
Select the Network tab and tick the Disable cache checkbox.

Chrome disable cache - Network tab

Reload the page.

^{❗️Note: The cache will be disabled only when the devtools window is open.}

Chrome solution #2

^{This only makes sense if #1 is not used.}

Open Developer Tools.
Click the Settings cogwheel icon in the bottom right corner.
In the dialog that appears, select under the Network subsection the Disable cache checkbox: from now on the cache will be skipped when the devtools window is open. When the devtools windows is closed caching will work as usual.

Chrome disable cache in devtools settings

Chrome solution #3: empty cache + hard reload

Open Developer Tools (otherwise the menu in the next step won't show).
Click and hold down the Refresh button, and then select from the dropdown Empty Cache and Hard Reload.

Chrome Hard Refresh and Cache Reset

Modifying javascript code

A browser-agnostic solution which could be used for debugging is to append in your server-side code a randomly-generated version string as a query parameter, i.e. call your script as:

<script type="text/javascript" src="myscript.js?ver=12345"></script>

This trick will force the browser to reload the script when the value of the ver parameter changes. If you make ajax requests then you can append "?ver=" + new Date().getTime() to your URL.

_{NOTE: Don't forget to remove the parameter when you are finished debugging because in production you most likely do want the scripts to be cached. It is a common practice though to generate a new timestamp on each new build — this can be used in production, and will ensure that after a new deployment the clients will always get the updated scripts.}

_{Unlike all the above solutions this one will work even when you have some sort of caching (e.g. redis, memcached, varnish) or CDN (e.g. akamai, cloudflare, cloudfront, etc) between the client and the server.}

115

answered Oct 22 '22 19:10

ccpizza

It is possible that the script is cached so the old version is loading from cache. If you want to make sure you get a new version, you can force a browser reload, clear your browser cache or change the name of the script or put a different query parameter on the end of the filename.

answered Oct 22 '22 17:10

jfriend00

Related questions
                            
                                React does not refresh after an update on the state (an array of objects)
                            
                                jQuery click brings me to top of page. But I want to stay where I am
                            
                                How do I pass a server control's actual client Id to a javascript function?
                            
                                Is there a way to know if someone has bookmarked your website? [closed]
                            
                                how to check if a file is selected using javascript?
                            
                                jQuery check if onClick exists on element
                            
                                JQUERY, Warning Users that IE6 Is Not Supported are wanted
                            
                                Is it good to use JQuery UI themes in a big high traffic website?
                            
                                Javascript shorthand way to duplicate strings
                            
                                TYPO3: get a javascript included by "headerData" to load before one included by "includeJS"
                            
                                How do I use Javascript in my Coldfusion page?
                            
                                window.getSelection return html [duplicate]
                            
                                getting facebook thumbnail profile picture
                            
                                How to hide javascript window.open address bar / location bar? [duplicate]
                            
                                How to disable event links in FullCalendar when using Google Calendar feed?
                            
                                css3 alternative for translate3d?
                            
                                AJAX using jQuery - Syntax Error?
                            
                                Add class with jQuery for second columns of table
                            
                                get the value after decimal point in javascript
                            
                                Convert an AngularJS function to service

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!

Donate Us With