2

I am relatively new to Visual Studio Development and I was wondering - it seems that everytime I make changes to my JS or CSS in my project - I have to "build" the project again.

Is there any way to simply refresh the browser as opposed to building everytime ? My understanding is that all the files are copied to some temporary directory but I was hoping that I can quickly debug/write JS and CSS within the solution and just refresh the browser to see the changes ?

Andy
  • 131
  • 1
  • 4

2 Answers2

6

In my experience, all you need to do is save the CSS/JS files and refresh the browser (hard refresh, not using the browser cache).

The reasons this will not work can be many, but mostly to do with any processing that the files need to go through before the go to the browser - say bundling, minification, usage of ScriptManager or any such server side work (including required deployment) on the files before they are available to the browser.

After chat, we confirmed that the OP is using ScriptManager with CSS/JS, causing the issue.

It is possible that using bundling instead would solve this.

Oded
  • 53,326
  • 19
  • 166
  • 181
  • The answer I was about to give. The keyboard shortcut in most browsers I'm familiar with is ctrl+R. – scrwtp May 27 '12 at 18:05
  • 1
    @scrwtp - Depending on OS. Ctrl + F5 is the one I know. – Oded May 27 '12 at 18:06
  • is there any way to debug this prob ? i.e. to find out what exactly is going on so I can try to resolve this issue because its a real pain for me :( – Andy May 27 '12 at 18:14
  • @Andy - Without more details it is difficult to know how to help. How are you launching the browser? What is serving the pages? – Oded May 27 '12 at 18:15
  • um basically I just build and then refresh the browser. My file proprities are "Build Action: Content" and "Copy to Output Directory: Do Not Copy" if that makes any difference. Is there any setting in IIS I should look out for ? – Andy May 27 '12 at 18:16
  • @Andy - do you have a post build event? Are the files sitting in the same directory that IIS is pointing to? – Oded May 27 '12 at 18:18
  • yeah I do have a postbuild event but nothing that I thought would affect JS/CSS ? the directory is point to the same as IIS – Andy May 27 '12 at 18:22
  • @Andy - And the browser is definitely pointing at the site IIS is serving (as opposed to the dev web server)? – Oded May 27 '12 at 18:24
  • well the bindings are pointing to the localhost port and the Physial Path is pointing to my web folder. each time I build it appears no problems - its just the building each time thats killing me – Andy May 27 '12 at 18:29
  • @Andy - "each time I build"? If the source folder is the same as the web folder, a file should appear changed immediately as it is saved. – Oded May 27 '12 at 18:30
  • yep and it does change immediately according to my SVN - but when I simply refresh the browser it doesnt work ? unsure whether its a specific setting - do I need to "copy js/css on output". The /bin folder updates correctly in my web folder [on build] but no idea why my JS/CSS doesnt just refresh – Andy May 27 '12 at 18:34
  • let us [continue this discussion in chat](http://chat.stackexchange.com/rooms/3573/discussion-between-oded-and-andy) – Oded May 27 '12 at 18:36
-2

JavaScript files are not compiled, they are interpreted. Visual Studio does not do that either, the browser does. It is done on Client browser and not the server. JS files like CSS, images and other content are cached in one or more places to save fetching time. So when the resources are being loaded the browser checks the cache first and if it is found it will not fetch it from the server. That is useful but can be problematic when developing, since you want to keep seeing your changes or images you just changed. To force the browser reload everything you can do Ctrl+F5 (hard refresh). That works for development purposes but when a new css is uploaded the users do not do a hard refresh. So if you want to ensure the users do get the latest css for example, there is a trick to do that. You add a ? and then a version number. Since this name along with that is stored in cache, when the cache is being recalled and the marker does not match the cache assumes it is new file. That also works with images and any other file. src=myCSSfile.css?ver=2018101

Mehrdad Ordoukhani
  • 1
  • 2
    Nice trick, but not an answer to the question. That was already resolved 6 years ago. Please note that StackExchange sites are not discussion forums, but strict Q&A sites. Anything that is not an answer to the question risks getting deleted. – Jan Doggen Sep 25 '18 at 15:28