UwAmp server doesn't detect changes that've made in files - javascript

everyone!
I'm using UwAmp 3.1.0 for my php development but I had some troubles
with it.
It worked perfectly at the beginning and the server still works
perfectly now but whenever I made a change to a .js file or .php
file it doesn't reflect that change when I update the page in the
browser.
I went to the chrome dev tools and opened the source section to see if the file is exactly what I wanted but it shows the original version which I've amended a while ago. The links to all files are correct and they are in a subdirectory in www folder.
It's so frustrating as I can't see the changes in action. I checked
the syntax and everything is ok but it doesn't want to stop an
animation in jquery after I it was fully shown to the user.
Can you help me with this situation as I have no idea what's causing the problem here?
It should update the file instantly when I click refresh in the
browser but it doesn't and keeps loading the version of the files
that I started to work with.

Uwamp is AMP stack (Apache, MySql and PHP) and "out-of-the-box" it doesn't have anything with caching of files.
Apache is normally reading/getting files from Uwmap www folder "as is" so basically if your last change is saved into file in www folder (please check directly with tools like notepad) Apache will read it instantly.
This is related to your Browser Cache (Empty yours Browser/Chrome cache manually or install Chrome extension like [Clear Cache Extension]:https://chrome.google.com/webstore/detail/clear-cache/cppjkneekbjaeellbfkmgnhonkkjfpdn?hl=en) and try to clear cache but completely ("from begining of time" like Chrome said).
Also a workaround is to click that Empty Cache icon every save before refreshing the page beacuse it will clear it almost instantly (depending on how long time ago have you cleared your cache)
Also try to set OPCache in Php.ini (settings file) in Uwmap to Disabled (locate opcache settings in php.ini and put 0 to disable - you can access it from Uwamp GUI also).

Related

JavaScript not working on refresh - must clear cache

I've implemented this script on my Squarespace website using the wexley template to make images in a gallery act as links (Wexley does not support clickthrough URLs natively).
It works fine, but if I add any thumbnails to the gallery it will not work until the browser cache is cleared.
I am wondering if there is a way to fix this? Perhaps through:
1) setting an expiry on the cache? I am not in developer mode so this would have to go into a header injection
2) Versioning? I tried hosting the javascript as a file elsewhere on my site. This worked (it pulled the script from another location) but still get the same issue, even when I upload a new script file and point to that after updating the page!
You can force the client to download the field again. To accomplish this you need to make the clients browser to think it doesnt have the script in cache. You can do this changing the file name.
Imagine you have this folder structure:
index.html
index.js
If in your index.html you reference the script like src="index.js" you may force clients to download just apendding a query string to the import: src="index.js?0"
Now clients browsers will check if this file is in cache, and since it isnt, they will fetch from the server.
Checking the resource loading on my page I realized that the script was not being cached so it was something else getting cached that was interfering.
Because I am not in dev mode, I implemented a fix that relies on appending the URL with the date of the update, and then setting up 301 redirects.
The URL and redirects (2 total) would have to be updated when any content is added.
If anyone sees issues with this (relating to SEO or some unknown), I would appreciate your feedback.

Update only one file via application cache

Here is my manifest.appcache file.
CACHE MANIFEST
app.js
theme.css
logo.png
How can I force browser renew the app.js file only?
Application cache works slightly different to what you may think.
When a new version of the manifest becomes available, the browser goes through all the files and determines which have changed on the server.
The browser does this by sending the "If-Modified-Since" header with the request.
If the file hasn't been modified, the server will return code 304 (not modified) and the browser will skip the download and move to the next file.
Only files that have been modified get refreshed.
It's also a good idea to include a version or hash in the manifest, so a new manifest is always downloaded and checked.
In example, I use a php script to dynamically generate my appcache.manifest.
The script md5's all the included files to produce a hash/version number that's included in the manifest.
I had a same or similar situation to this.
I needed the browser to refresh the cache of file index.html.
And I could only see it refreshed when in incognito mode, which was not helping me much...
except for understanding why I wasn't seeing my file's update...
Anyway, what helped me was like the following:
Make backup of specific file that needs refreshing
Delete file in project
Run web application (without the file)
Return file to project, and then run application
For me, this worked.
I hope it will help others as well.

Chrome Dev Tools - Modify javascript and reload

Is it possible to modify the JavaScript of a page and then reload the page without reloading the modified JavaScript file (and thus losing modifications)?
This is a bit of a work around, but one way you can achieve this is by adding a breakpoint at the start of the javascript file or block you want to manipulate.
Then when you reload, the debugger will pause on that breakpoint, and you can make any changes you want to the source, save the file and then run the debugger through the modified code.
But as everyone has said, next reload the changes will be gone - at least it lets you run some slightly modified JS client side.
Great news, the fix is coming in March 2018, see this link: https://developers.google.com/web/updates/2018/01/devtools
"Local Overrides let you make changes in DevTools, and keep those changes across page loads. Previously, any changes that you made in DevTools would be lost when you reloaded the page. Local Overrides work for most file types
How it works:
You specify a directory where DevTools should save changes. When you
make changes in DevTools, DevTools saves a copy of the modified file
to your directory.
When you reload the page, DevTools serves the
local, modified file, rather than the network resource.
To set up Local Overrides:
Open the Sources panel.
Open the Overrides tab.
Click Setup Overrides.
Select which directory you want to save your changes to.
At the top of your viewport, click Allow to give DevTools read and write access to the directory.
Make your changes."
UPDATE (March 19, 2018): It's live, detailed explanations here: https://developers.google.com/web/updates/2018/01/devtools#overrides
The Resource Override extension allows you to do exactly that:
create a file rule for the url you want to replace
edit the js/css/etc in the extension
reload as often as you want :)
In the devtools preferences check the Enable local overrides.
Go to network tab, find the file you want to edit, rigth click on it and select Save for overrides (on the sources/overrides tab you need to add a local folder)
The file appears in a new tab on the Sources tab as local copy, so you can edit this file, and after site reload the new (and edited) override file will load on the site!
I know it's not the asnwer to the precise question (Chrome Developer Tools) but I'm using this workaround with success: http://www.telerik.com/fiddler
(pretty sure some of the web devs already know about this tool)
Save the file locally
Edit as required
Profit!
Full docs: http://docs.telerik.com/fiddler/KnowledgeBase/AutoResponder
PS. I would rather have it implemented in Chrome as a flag preserve after reload, cannot do this now, forums and discussion groups blocked on corporate network :)
Yes you can eazily!
Source -> filesystem -> choose the conatainer folder -> allow access -> open your file, edit and save.
https://www.delftstack.com/howto/javascript/edit-javascript-in-the-browser/

Cache manifest offline app not refreshing javascript files in Chrome

I am working on an offline web app using a cache manifest file. I am having trouble refreshing my javascript files. If I change a .js file (which is listed in the manifest file) and I then change the manifest file version no. and save it, then the changed .js file does not get reloaded on the client. What do I have to do to get .js files to refresh?
Thanks
That's because the webserver tells the browser cache static files for a few hours. So the browser doesn't know the manifest file is changed. You can clear all the application data 'or' config the web server the manifest is not cacheable...
Read http://diveintohtml5.info/offline.html for more info
If you want to clear your app cache on chrome use chrome://appcache-internals/
and by hand you have to search in C:\Documents and Settings\YOURUSERNAME\Local Settings\Application Data\Google\Chrome\User Data\Default\Cache
I had assumed that you if you use a cache manifest and then refresh the manifest, that the browser would request all of the files again. However, I have found that I needed to explicitly set headers in all of the files in the manifest to tell the browser not to cache the files. I believe that once the manifest tells the browser to request the file again, the browser treats it like any other non-manifest cached file. Maybe this is an error with Chrome, but I feel like I saw this in another WebKit browser.
Regardless, set the headers for the files in the manifest to never be cached and they should reload when you update the manifest. If these files are used outside of a manifest page, you may need to actually cache the files depending on your needs.
Type chrome://appcache-internals in your address bar then click ENTER
A list of cached manifests will appear then just delete the one you want and everything will be refreshed when you load your page again.
Hope this helps :)
I had the same problem until I came across this priceless warning on the
Mozilla Developer site
Important: Do not specify the manifest itself in the cache manifest
file, otherwise it will be nearly impossible to inform the browser a
new manifest is available.
woops. my bad.
However, every time I change something in the code, I need to change something in the manifest, and then reload twice, which is an unrelated issue.
In my case, i has to disable the traditional browser cache using meta tags. See this SO question how to that

Why don't Django admin "Today" and "Now" buttons show up in Safari?

I'm developing a Django application that contains a model with a date/time field. On my local copy of the application, the admin page for that particular model shows this for the date/time field:
alt text http://www.cs.wm.edu/~mpd/images/bugs/django-date-local.png
This is as expected. However, when I deploy to my webserver and use the application from there, I get this:
alt text http://www.cs.wm.edu/~mpd/images/bugs/django-date-server.png
The application on the server is exactly the same as my local copy, except that I have debugging disabled on the server (but I don't think that should matter...should it?). Why does the admin app on the server differ from the local admin app?
Update
The issue seems localized to Safari. The "Today" and "Now" buttons appear when the admin site is accessed via Firefox. It looks like Safari can't download some of the JavaScript files necessary to show these widgets (strange that Firefox can, though).
I noticed that Safari is receiving a "304 Not Modified" code for the following files, but I'm not sure what that means, or how to fix it. Obviously, these are the JavaScript files and images that control the date/time widget:
RelatedObjectLookup.js
DateTimeShortcuts.js
icon_calendar.gif
icon_clock.gif
I think you have to look at what is different between your firefox configuration and safary config
Off the top of my head:
One could be configured to use a proxy (messing with the trafic) the other not. Make sure the configuration is the same in both.
Safari could have cached the error clear the cache before testing again.
Try to access the gif files directly from the browser (by inputting the full url of the images) and run wireshark on the wire comparing both GET requests and responses. Something WILL be different that will help you to track the problem.
If you're getting 304 on those files. Flush your browser's cache and try again.
If it doesn't load again anyway, make sure you are getting 200 OK.
It seems like you have admin media missing (hence js and images aren't loading). I generally do following.
in settings.py
ADMIN_MEDIA_PREFIX = '/media/admin/'
Then I symlink path of django.contrib.admin.media within my media dir. Say:
ln -s /var/lib/python-support/python2.5/django/contrib/admin/media/ /var/www/media/admin
Development server serves admin media automatically. But on production servers one generally prefers to server static stuff directly from apache (or whatever server).
Check the media location, permissions and setup on your deployment server.
http://www.djangobook.com/en/1.0/chapter20/
Have you tried checking out firebug's NET tab to see if the admin javascript/css/image files are all loading correctly?
I had that problem once.
Compare all those files from the dev server against the production server.

Categories