Edited to clarify the underlying question.
I am trying to debug a simple HTML5 webpage containing one image and one video. Everything displays fine. The video plays correctly. But, when I try to refresh the page, everything is downloaded except the video file. I am using the Firefox developer tools but I can't understand what is going on.
On the network tab I see the .html file being downloaded, then the image.jpg file. But I never see the video.mp4 file downloaded. The video plays OK, but it is not the current version on the server. It seems to be a previous version that has been cached.
I'm mystified why this should be. The cache is disabled in developer tools. I'm refreshing the page with Ctrl+F5. It's as if the video is being served from some secret local cache that I don't know about. I'm using Firefox 47.0.1. The same thing also happens when I test with Firebug.
Edit. I have now tried Developer Tools in Chrome and it's exactly the same. The very first time I access the page, I can see video.mp4 being downloaded. On subsequent reloads, I see the .html and .jpg files normally, but not the video.mp4 file. It must be cached somewhere because it plays. I disabled the cache in Chrome Dev Tools. I cleared the cache explicitly and tried an incognito window. Apart from the very first time, I never see any indication of the video file being downloaded.
I must be missing something obvious. Can anyone else reproduce this?
Here is my HTML.
<! DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>Test page.</p>
<img src="media/image.jpg">
<video src="media/video.mp4" controls="">
Display this if the browser can't play video.
</video>
</body>
Information moved from comments on an answer to the question:
1:
Thanks #nakji. Clearing the cache and private browsing made no difference at all. But closing the browser did. I reopened the browser after clearing the cache. On my very first access to the page I could see two GETs for video.mp4 with responses 206 (Partial Content). But after that it was back to the original problem. I will download Chrome and try that
2:
#ManoDestro. I tried everything possible to force a fresh download of video.mp4. But it's not happening. I reloaded the page with Ctrl+F5. I turned off caching in Dev Tools settings. I cleared the cache manually. I tried a private browsing window. I can't think of anything else. It's like the video is served from a secret cache that doesn't obey the normal caching rules. I have used multiple tools to confirm that the file is not coming down the wire - FF Dev Tools, Firebug, and now Wireshark. Can someone please test with a similar setup?
After a whole day's Googling I can now answer my own question. It turns out that Firefox has a special "media cache" for HTML5 video and audio content which is completely separate from the regular cache that everyone knows about. It is optimised for the high bandwidth and huge files associated with media content. One of the devs, Robert O'Callahan explains it all here.
The dumb thing is that this media cache doesn't seem to get cleared when you would expect it to. In fact it never seems to get cleared. Ever. The result is that Firefox keeps serving up stale content from the cache when you really want it to fetch the media file again from the server. This was the problem I was trying to debug originally. Firefox kept playing the wrong video after I changed the file on the server. I couldn't get it to download the new version.
All the things you normally do to force a page reload don't work with the media cache. The following have no effect.
The user selects 'Clear recent history' and deletes everything.
The user turns off caching in Developer tools.
The user forces a complete page reload with Ctrl+F5.
The only thing that does work is closing the browser and starting again. I'm still finding my way around this complex area. If anyone knows any more about it, please comment.
I reported this as a bug to Firefox here.
How do I reload a page in Google Chrome, so the source code will not change?
In other words, if I change some text on the page with developer tools, and reload the page it loads the source code from the server. How can I reload the page so it will keep my previous changes I made?
To be more specific:
I enter a page
I edit content with Developer Tools
I press reload
I get the original version
As far as I know I must forbid Google Chrome to download source code from server or load a cached version, but how I to do that?
As far as i know isnt this possible, because when you press reload, Chrome automatically "deletes" your webpage that is shown at the moment and gets the source from the server again. You could try to save your changed webpage in the cache of a proxy server and then get it from there.
I have a website with a domain and host. I sometimes change some pages and upload them via FTP (I'm using FileZilla). Tough, when I enter the webpage from the domain, the latest changes doesn't appear. I have checked many times the html files I've changed and they all look correctly uploaded to the host. But when I save the html page and check its code, the changes doesn't appear as expected. Why are the changes aren't being updated when browsing the webpage and how can I solve this?
Try refreshing the page using CTRL+F5, if it's not working, clean browser cache.
Clean your browser Cache or try opening a private navigation window.
Your Browser will Cache files so it doesn't have to load them every time. Usually refreshing will solve the issue but a surefire way is to enable the "disable browser cache" option in Chrome's dev console (firefox may have something similar).
When you open the dev console there is a gear in the upper right that opens the options menu. In the "General" tab the "Disable cache (while DevTools is open)" option is available. after enabling this just refresh the page with the console open and it will download all of the latest files from your server.
Did you try running ng build before uploading the website to FTP? If your website is made on Angular then ng build is must to update the new changes. I got the same problem and ng build worked for me :)
How can i auto refresh a cached html. i load a html submit and do some stuff and then close the browser and opens the browser which loads the cached html but it does not refresh..
I'm not quite sure on what you're getting at, but a cached HTML page is a snapshot of a page at a point in time. This means that if you are looking for an update from a webmaster or something like that by refreshing the page, you would be best to visit the actual page as a cached page doesn't change with the server's version of it.
I really like the ability to edit javascript in the chrome debugger however, I find that it can be really problematic getting the debugger to re-fetch the JavaScript from the server.
Sometimes I have to go as far just closing the debugger and reloading the frame works OK - but other times (an dI cannot pin down under what conditions this occurs) I have to clear my temporary internet cache. Sometimes I swear I have to close chrome completely, then clear the cache and then load the page before the debugger finally shows me the most up-to-date script.
(NB. There is no caching of the script by the web server)
I was wondering if anyone knew of a quick and easy way to tell the debugger to invalidate all its javascript and fetch it all anew on page reload?
While you are developing your script, try disabling the Chrome cache.
When you reload the page, the JavaScript should now get refreshed.
Chrome circa 2011
Chrome circa 2018
You can also access it on the network tab:
The context menu shown above is accessible by right clicking / presssing & holding the "reload" button, while Chrome Dev Tools is opened.
Empty cache and hard reload works best for me.
Another Advantage: This option keeps all other opened tabs and website data untouched. It only reloads and clears the current page.
You can always clear a specific file by doing the following:
Open Dev Tools
Click on the Sources tab
Find your script / image / file
Check the right panel to see if your file is up to date
If not:
Right click the resource in the left panel and choose 'Open Link in New Tab'
Force a reload of the resource with the methods above. (See #Bishoy Hanna's example)
This is very handy if you have resources that are in frames and CTRL+F5 is not force refreshing them.
Shift+F5 quickly clears the cache.
Here's a shortcut to DevTools:
F12 to open Chrome DevTools
F1 to open DevTools Settings
Check Disable cache (while DevTools is open) as shown below:
Note: Updated per Dimi's comment. They tend to move it so let me know or update the post if you notice that it's changed.
For Google chrome it is not Ctrl+F5. It's Shift+F5 to clear the current cache! It works for me !
On Windows, Ctrl+Shift+r would force reload the script in chrome.
If you are making local changes to a javascript in the Developer Tools, you need to make sure that you turn OFF those changes before reloading the page.
In the Sources tab, with your script open, right-click in your script and click the "Local Modifications" option from the context menu. That brings up the list of scripts you've saved modifications to. If you see it in that window, Developer Tools will always keep your local copy rather than refreshing it from the server. Click the "revert" button, then refresh again, and you should get the fresh copy.
It seems as the Chrome debugger loads source files into memory and wont let them go despite of browser cache updates, i.e. it has its own cache apart from the browser cache that is not in sync. At least, this is the case when working with source mapped files (I am debugging typescript sources). After successfully refreshing browser cache and validating that by browsing directly to the source file, you download the updated file, but as soon as you reopen the file in the debugger it will keep returning the old file no matter the version from the ordinary browser cache. Very anoying indeed.
I would consider this a bug in chrome. I use version Version 46.0.2490.71 m.
The only thing that helps, is restarting chrome (close down all chrome browsers).
Right click on reload button in chrome and click "Empty Cache and Hard Reload"
If the files which you are loading are cached and if the changes you have made does not reflect in the code then there are 2 ways you can deal with this
Clear the Cache as everyone told
If u want Cache and only the files have to be reloaded , you can go to network tab of the dev tool and clear whatever was loaded. next time it will not load it from cache. you will have your latest changes.
There are also 2 (quick) workarounds:
Use incognito mode wile debugging, close the window and reopen it.
Delete your browsing history
Deactivating Breakpoints caused the new script to load for me.
In my opinion it's easiest to work in a 'private browsing session' of chrome, to ensure that your javascript files don't come from the cache.
If there is document on URL:
file:///C:/Users/user/Desktop/site/index.html
Add any parameter to your URL, like this:
file:///C:/Users/user/Desktop/site/index.html?foo=777
and the browser'll refresh all sites resources
You can also use this Chrome extension to quickly switch between using or not the cache: https://chrome.google.com/webstore/detail/cache-killer/jpfbieopdmepaolggioebjmedmclkbap