Stop caching Javascript files when running in browser?

Is there an option in Webstorm to stop the caching of Javascript files from Webstorm's local html server?

 

When I change a Javascript file and click run, sometimes it runs with the old Javascript file because it's cached in the browser.

11 comments
Comment actions Permalink

WebStorm doesn't cache files. It must be a problem with your project setup

0
Comment actions Permalink

I'm talking about Webstorm's html server. It's allowing the browser to cache the Javascript files.

0
Comment actions Permalink

The built-in server doesn't cache files (and doesn't affect browser caching in any way). do you use any build tools/watchers/etc.? Do you have your project stored on local drive? are there any symlinks in your project path? What language do you work with - pure javascript, ES6, Dart, etc.?

0
Comment actions Permalink

Chrome browser has an option on the Dev Console>Network tab>Disable Cache.

Is this something that exists within the Intellij JS debugger?

0
Comment actions Permalink

No; the debugger itself doesn't cache files

0
Comment actions Permalink

I'm looking for this functionality too; launch the program in an instance of Chrome that already has caching disabled. When working with vscode, I never had to check 'disable cache' in Chrome because Chrome didn't cache files. With WebStorm, it does.

0
Comment actions Permalink

Elena Pogorelova the debugger does not cache, that is understood. But the browsers do cache on the devices. That includes Safari on the iPhone. There is no way to prevent that on the iPhone.

The only solution would be to prohibit caching in the headers in the HTTP response of the internal web server. That would make it possible to change code in WebStorm / IntelliJ and see the changes on the iPhone with a refresh in Safari.

0
Comment actions Permalink

Elena Pogorelova this line / entry would have to be added to the internal web server's http response headers:

Cache-Control: no-cache
0
Comment actions Permalink

Until JetBrains fixes this (ideally by adding an option for the internal web server), I have the following suggestion:

npm install --global http-server
http-server -c-1

This runs a very simple http server from wherever you start it. Start it from the root folder of your project and you will get the same paths as with the built in web server, albeit with a different port - by default, 8080. It will bind to all of your network end points by default.

Do NOT initially forget / leave out the -c-1 because once a browser has loaded css and js without the http headers saying don't cache, it will remember having to cache them (http-servers's default is 3600 seconds).

Once cached, depending on your browser, it can be kind of sticky, especially in the case of Safari on iOS where you have to go to settings / safari / advanced / web site data ... search for your local IP / name (especially funny with IPv6 addresses) ... find entry ... pull left ... press trash can icon 😴

0
Comment actions Permalink

Please do not use it as a production server, of course.

Keep in mind that like with the built in server, Windows' firewall settings might interfere.

Please do not entirely disable the Windows Defender firewall, especially on a laptop that's regularly used in public WiFi networks.

There are more fine grained settings in the Windows Defender firewall.

The same is true for Linux and the Mac.

0
Comment actions Permalink

Elena Pogorelova btw. I looked at the Cache-Control options from http-server:

private, must-revalidate

Maybe that's in some ways better than no-cache, might allow e-tag support, maybe it supports e-tags, maybe with the file's hash as the value...

Without an e-tag it might make no difference at all, though, and I son't know what private does ^^

Just wanted to clarify that what works here does not use no-cache as mentioned above but two different values for the same header.

Cheers from Vienna! ^^

0

Please sign in to leave a comment.