When coding HTML, browser doesn't always detect changes

Question

When I'm coding HTML and CSS and load the page in the browser to check changes, sometimes it doesn't update for a while. This obviously causes problems with incremental changes where it's hard to tell if it's changed to suit my latest change or not.

I was wondering if there was a way around this? Possibly a browser (or mode) which is especially for this situation that doesn't have this behaviour?

http://stackoverflow.com/questions/7078953/how-to-force-chromes-script-debugger-to-reload-javascript — jantimon, Oct 01 '13 at 08:32

antoine129 · Accepted Answer · 2013-10-03T10:04:47.553

5

Try Ctrl+F5 on Windows or Cmd+Shift+R on OSX, this will avoid your browser reading its cache when loading the page (at least when it's Chrome or Firefox)

edited Oct 03 '13 at 10:04

answered Oct 01 '13 at 08:33

antoine129

4,484
4
29
50

On Chrome you can also install this cool extension I use: https://chrome.google.com/webstore/detail/cache-killer/jpfbieopdmepaolggioebjmedmclkbap – antoine129 Oct 01 '13 at 08:36
Hmm, this isn't working. Perhaps it's something to do with it being a .php file on localhost. Surely it should still refresh right away? – Andrew Oct 01 '13 at 08:45
Depends what's in your .php ;) – antoine129 Oct 03 '13 at 10:02

score 1 · Answer 2 · answered Oct 01 '13 at 08:32

1

You could try deleting your browser cache and reloading the page. In case of CSS I also found sometimes I will need to load the CSS file separately in my browser and refresh it to update.

answered Oct 01 '13 at 08:32

Mihai Alex

670
6
13

score 1 · Answer 3 · edited May 23 '17 at 10:29

1

Sounds like your browser cache, you can test this by clearing it or doing a "hard refresh" to confirm.

You will need to throw some no cache headers if you want to stop this permanently, you can do this from the web server or server-side code depending on your setup (see How to control web page caching, across all browsers?)

edited May 23 '17 at 10:29

Community

1
1

answered Oct 01 '13 at 08:34

fire

20,449
16
73
109

score 1 · Answer 4 · answered Oct 01 '13 at 08:35

1

On windows refresh with CTRL + F5. The browser will not show from cache. Also in developer tools you can tell it not load from cache

answered Oct 01 '13 at 08:35

user2833975

34
1

score 1 · Answer 5 · answered Oct 01 '13 at 08:44

1

It is mostly because of browser cache.

Just a suggestion(You may find it useful, As an addition to other answers):

If you are on chrome then there is an option to disable cache while the dev toolbar is open. It works for me to ensure there is no caching while I am developing. (I keep my dev toolbar open all the time while developing so it works for me), Here is the screen shot.

Quote from chrome dev tools (https://developers.google.com/chrome-developer-tools/docs/settings)

General

Disable cache Will prevent the caching of resources ONLY for pages which have DevTools open. This will not disable caching if the DevTools are closed

.

enter image description here

answered Oct 01 '13 at 08:44

ʞɹᴉʞ ǝʌɐp

4,164
5
34
59

Ah, i followed these steps, but it still isn't updating my content. It's possibly because I'm saving to localhost. Maybe that has some effect? – Andrew Oct 01 '13 at 08:56
Interesting, Try sending `no-cache` header from your web server and then check to make sure if it is the cache issue or something else. – ʞɹᴉʞ ǝʌɐp Oct 01 '13 at 09:05
@Andrew you are right,`no-cache` header will prevent browser from caching the result. BTW! It is not a good idea to set these headers for static resources like js/css/images etc. Caching static assets is good idea. I belive answer above helps you to by pass the cache without `no-cache` header. – ʞɹᴉʞ ǝʌɐp Oct 23 '17 at 06:04

score 0 · Answer 6 · answered Oct 01 '13 at 17:32

Hmm could be a web server setting, caching request to your same resource. I used to see that a lot on tomcat with JSP. With tomcat we used to delete compiled classes ('work' folder), though, in your case with PHP you may check your server cache settings (files/sessions).

Example: "A typical web server, such as Apache, uses the time of file modification to inform a web browser of a requested page’s age, allowing the browser to take appropriate caching action. With dynamic web pages, the actual PHP script may change only occasionally; meanwhile, the content it displays, which is often fetched from a database, will change frequently."

Source : http://www.sitepoint.com/caching-php-performance/

Another workaround would be to touch (add a space and save) your PHP file when you want it to reload.

When coding HTML, browser doesn't always detect changes

6 Answers6

Linked

Related