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.

0
15 comments

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

0

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

0

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
Avatar
Permanently deleted user

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

Is this something that exists within the Intellij JS debugger?

0

No; the debugger itself doesn't cache files

0

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

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

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

Cache-Control: no-cache
0

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

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

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

must-revalidate only  "Indicates that once a resource becomes stale, caches must not use their stale copy without successful validation on the origin server."
no-cache means "the stored response MUST always go through validation with the origin server first before using it".  

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control 

Since the HTTP server in IntelliJ products is only meant for development, no-cache should be used in the cache-control response header, instead of must-revalidate

 

0

@Doug Reeder thanks for the clarification! 🙂

0

It is the built-in webserver that caches files.

If you load an older version of the same project, you consistently have this problem.

The webserver identifies the files by module (project) name and relative path and caches them.

The caching even survives restart with clear all caches of webstorm.

To avoid the problem your can

  • rename your project
  • make a small change in the file (the cache will see that your file is newer and refresh the cache).
0

In case anyone stombles accross this problem, I fixed it for me like this:

- In the debug configuration click on the three dots next to the broweser select

- click on the browser config you are using and the the pencil on top. 

- In the opening popup add this to command line options: --disk-cache-size=0 --disable-application-cache --disk-cache-dir=null. It basically says chrome to start without cache. Maybe you have to restart IntelliJ for this to work

0

Please sign in to leave a comment.