Always need to clear cache - javascript

I have a facebook app I am testing on my localhost. It's quite annoying that I always need to clear the cache in order to reload after making changes. Any idea how can I solve this?
I've heard from some friends that some Javascript code might be helpful, but I have no idea what to actually do.
Thanks in advance

have you tried the google chrome developer tools? they have an option to disable all cache when they are open.
I normally open the dev tools (mac: command+alt+i), with disabled cache (click on the settings button on the bottom right) and then hold down shift and click reload to make sure all cache is erased.

Related

Refresh page does not apply changes in Angular

Why sometimes refresh of page (F5) does not apply changes on view, even if I have JS and HTML code? I have to clear browsing and tmp files and refresh again. I know that angular saves a lot of cache data but it is very problematic when I want to see changes and there is no update on screen. Than I do not know if it is my mistake in code or there is a problem with Angular. How to fix it?
At development stage you can deactivate the browser cache -
In Chrome Dev Tools go to settings and click "Disable cache (while DevTools is open)" or you can go to network tab and check option "Disable Cache"
In Firefox and IE also we have similar options where we can disable cache while dev tools are open.
For me this is the easiest options without making any code changes.

Dashing doesn't detect change of coffescript

I'm working on some dashing widgets in a dashboard project.
Normally if I work on a coffeescript and I save it, I have to reload the page in the browser, and I can see the effect of my changes in the widget.
For some time the change won't do any effect in the browser. I thought, it may be a browser cache issue and I tried clear the cache, but nothing changed. I tried another browser, same issue.
I can see my changes in the browser only if I change the classname off the widget.
Is there any simpler method?
I encountered a similar issue. The widget would not refresh to reflect my html changes (new <h2> tag). Restarting / clear-cache were the first things I tried. I use Chrome and I found this note in the Dashing-Workshop :
Note: Chrome is sometimes weird, and it's possible that your browser isn't showing the number anymore in the widget. If that's the case load dashing in a brand new tab to clear the cache.
I resolved my issue by turning off caching "Developer Tools > Networking > Disable cache [x]"
It shall work, Use chrome developer tool to debug it
console.log to print to console
use inspect element to see the html/css

Google Chrome "Back" and "Forward" History

I am developing a little extensions called "Tab Bundler", which in short saves all the open tabs in a window into a bundle that can be opened with the click of a button. When a bundle is opened however, no history of how the user got to that url is saved, ie. the user can't click back to see how they got to that url. This is functionality I want to implement. I looked for a while, googling, looking thoroughly through the google chrome extension documentation: http://code.google.com/chrome/extensions/history.html. But I couldn't figure out how to get this information without tracking it myself. Is that the only option I have? Any thoughts would be really appreciated.
Thanks!
Look, many people tried this before. You are not alone in this quest!
At the moment the answer in Google Code was: anybody asked for it when they where developing the History API. Then there's no elegant way to access tabs' history.
Of course, you can hook chrome.tabs.onUpdated to record every page and make your own tab's history...
You could probably hook chrome.tab.onUpdate as well as some state or focus change hook to correlate.
I really want this, please make it!

Why isn't Google Chrome reloading my scripts?

So, I have a script called "engine", and after much headbashing and (futile) debugging, I've found out that GC simply isn't reloading it!
This is how I include it in the webpage (inside the <head> element):
<script type="text/javascript" src="engine.js"></script>
When a put 10 console.log("asdf");'s at the start of the script, it's like they aren't there. When I went to the "resources" tab in the GC console, I saw that no changes are being applied whatsoever to that script! Hlep? Would putting a + "?" + new Date() at the end help?
The universal solution that works in Chrome, Firefox and IE is cleaning the cache via Ctrl+Shift+Del (on Mac ⌘+Shift+⌫).
Chrome solution #1
Open Developer Tools (F12 or ⌘+⌥+i, or right-click → Inspect).
Select the Network tab and tick the Disable cache checkbox.
Reload the page.
❗️Note: The cache will be disabled only when the devtools window is open.
Chrome solution #2
This only makes sense if #1 is not used.
Open Developer Tools.
Click the Settings cogwheel icon in the bottom right corner.
In the dialog that appears, select under the Network subsection the Disable cache checkbox: from now on the cache will be skipped when the devtools window is open. When the devtools windows is closed caching will work as usual.
Chrome solution #3: empty cache + hard reload
Open Developer Tools (otherwise the menu in the next step won't show).
Click and hold down the Refresh button, and then select from the dropdown Empty Cache and Hard Reload.
Modifying javascript code
A browser-agnostic solution which could be used for debugging is to append in your server-side code a randomly-generated version string as a query parameter, i.e. call your script as:
<script type="text/javascript" src="myscript.js?ver=12345"></script>
This trick will force the browser to reload the script when the value of the ver parameter changes. If you make ajax requests then you can append "?ver=" + new Date().getTime() to your URL.
NOTE: Don't forget to remove the parameter when you are finished debugging because in production you most likely do want the scripts to be cached. It is a common practice though to generate a new timestamp on each new build — this can be used in production, and will ensure that after a new deployment the clients will always get the updated scripts.
Unlike all the above solutions this one will work even when you have some sort of caching (e.g. redis, memcached, varnish) or CDN (e.g. akamai, cloudflare, cloudfront, etc) between the client and the server.
It is possible that the script is cached so the old version is loading from cache. If you want to make sure you get a new version, you can force a browser reload, clear your browser cache or change the name of the script or put a different query parameter on the end of the filename.
This bugged me as well; CTRL+F5 or SHIFT+F5 never worked...
The only things that works is opening your dev tools (hit F12), and right-click the reload icon next to the address bar and then selecting either "Hard Reload" or "Empty Cache and Hard Reload"
As I said in the comment I guess it's a cache problem, a CTRL+F5 should be enough, in case it is not go for CTRL+SHIFT+CANC and clear browsing data. However sometimes it's the server that has some kind of cache, I say that because with IBM WebSphere I often get cache problems that I can't resolve with a simple F5 on my browser. I just have to wait for my web server to "refresh" itself.
In the latest chrome stable 21st Oct 2016.
Open Developer Tools (F12 or right-click > Inspect or vertical ellipsis icon in address bar right corner > More Tools > Developer Tools).
Click the vertical ellipsis icon in the top right corner of Developer Tools navigation bar > settings.
In the Preferences section find the Network > Disable cache.

When I change code, save and it, and test it on my browser, it still runs the old code, why?

I am using html5 and javascript on Mac OSX Lion. My text editor is text mate, though it is out of date. So I tried saving it in text editor. Ran it and it still executed old code that I had deleted and saved. Does someone have an idea what the error might be? Thanks.
--Udate-- Figured it out: Thanks to everyone for the speedy answer! Turns out I had to close the browser after emptying the cache for it to take affect. I did a few closing and opening tests, and essentially if I just refresh the page, it accomplishes the same as emptying the cache. What I was doing was just closing after I clicked my html and saw what it did, then reopen it. But yea, emptying the cache worked. Thanks again!
Your browser is cacheing the old files. Turn off the cache in your browser!
delete browser cache using ctrl+shift+delete key
and then refresh you page
It probably has to do with that the browser caches your page. Make sure that the cache is cleared when deploying new content.
How to quickly clear cache is different in each browser so google how you easy can invalidate the cache in your browser of choice.
http://itdc.lbcc.edu/cps/engines/clearcache/index.html Use this to clear your cache.
Do ctrl-F5 to fetch an uncached version of your page.

Categories

Resources