I am trying to edit a JS file in chrome dev tools and half the time it works but the other half of the time the server JS file is cached and it used that, despite my changes.
I am trying to test a production feature only so I need to test it this way -- is there a way to ensure I can edit the chrome JS files so that it reflects each time in browser when testing?
Chrome has a feature called Local Overrides, which is basically this. It allows you to use a file location from your computer to load the webpage assets from, which you can modify, and the modifications will persist. Once you turn off the feature, it will revert to what is being served from the pages host (or cache), but you can re-enable and continue on.
As a word of note, this is only available (as far as I know) in Chrome V65+
Chrome 65 Release Video
Related
We are currently using Webpack with the HtmlWebpackPlugin to generate our javascript builds for our webpage.
new HtmlPlugin({
template: 'www/index-template.html', //source path - relative to project root
filename: 'index.html', //output path - relative to outpath above
hash: true,
cache: true //only emit new bundle if changed
}),
This causes a hash to be added to the query string of the bundled javascript file.
<script type="text/javascript" src="/build/vendor.min.js?4aacccd01b71c61e598c"></script><script type="text/javascript" src="/build/client.min.js?4aacccd01b71c61e598c"></script>
When using any standard desktop or mobile browser, new builds are cache busted properly and the new version of the site is loaded without any effort from the user. However, we also have a chrome web app implementation where we call:
chrome.exe --app=http://localhost:65000 --disable-extensions
In this application, for some reason the hash on the end of the javascript build doesn't bust the cache. We have to manually right click somewhere on the page, then click reload (or press F5). For some reason the cache isn't busted in the web application.
I was thinking that possibly it is caching the index.html file maybe? That may cause the app to never receive the updated hash on the build. I'm not sure how to solve that issue though if that is the case.
I have also noticed that if our localhost server is down, the page still loads as if the server were running. This indicates to me some kind of offline cache. I checked the manifest.json parameters and can't find anything to force a reload.
I have also tried these chrome command line switches which did not help either: --disk-cache-size=0, --aggressive-cache-discard, --disable-offline-auto-reload.
Another caveat is that we need to retain the localStorage data and their cookies. In a standard browser window, or any browser for that matter it works just fine, but not when it is inside a Chrome web app.
Are you talking "Progressive Web App" with service workers? If so then the html file can (and should) be cached on first download. You need to have some sort of aggressive update process on the client to ensure new files are loaded properly.
Perhaps having an api call that checks some sort of dirty flag on the server could work, and if it comes back true, it should reload the template files. Or something more complex where it gets an array of dirty files from the server so it knows which ones to reload instead of loading everything. Just some ideas.
As your page works without the server running at localhost, I suspect that your app is offline first. This is done exactly through service workers(as pointed out by #Chad H) which are officially supported by Chrome and are experimental in other browsers. So, expect different behavior in other browsers. To bust the cache,
In Production
For a permanent solution, you to find and modify the service worker (SW) code. Deletion of old caches happens only in activate event of SW.
You can also read more about Service worker and ask a question with the updated SW code. Also, check out this resolved issue that faced a problem similar to yours.
For dev setup
You can use the Disable Cache option under Network tab in Chrome DevTools (works only when DevTools is open) or use a more robust chrome extension called Cache Killer.
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).
Is Local file mapping dev tools alternative to Charles proxy in firefox? I am trying to map a remote server resource to a local file, but it doesn't seem to be working. The console statements and changes in the JS file doesn't seem to be applied when I reload the page.
I can see the local folder and file listed in the sources folder. Also, see that the sources doesn't show the original JS file. But I see this message in the sources tab for the local file.
Workspace mapping mismatch
Rest of the warning states that the file in local folder is different from the remote loaded file. Why is that a problem, wouldn't that be always the case, since you want to edit the file locally?
What am I missing? Any pointers to fixing this? Is my assumption wrong that this feature in chrome dev tools can allow loading a resource locally, as if it was loaded from the original location?
I tested this again with a simple html page with a single js file having a simple console log statement - "loading remote file ...". This file is mapped to a local js with a different log statement "loading local file.." However, I still see the log message from the remote file.
Added snapshot from dev tools sources tab for more context. Sources tab shows the local folder and file correctly, but shows the mapping warning. Also notice that sources doesn't have the remote.js file anymore.
Is my assumption wrong that this feature in chrome dev tools can allow loading a resource locally, as if it was loaded from the original location?
I don't think this is accurate. When you map a file on a server to your local workingspace, Chrome acts as a sort of editor for your local files. You can edit the files through Chrome and Command+S to save your local files. But nothing has changed on the server. It doesn't update the files on the server, and it doesn't tell Chrome to "Use my local files instead of what's on the server".
What many people do is automate the deployment process so that when a local file is updated (either through Chrome + Workspace Mapping or just simply by editing in your editor), your working copy gets deployed. That way, next time you reload the browser, you'll see your edits.
Edit: From the workspace documentation:
And you can map resources served from a local web server to files on disk, so when you change and save those files, you can view them as if they were being served.
I think the key here is local web server. I did a bit more digging and found this dev tools docs issues, with a comment effectively saying that what you're trying to do isn't supported:
The DevTools currently does not do resource substitution. It can simply map the remote files to your local copy so if things are kept in sync (like using a local server on-system) then when refreshing your modifications can persist.
Looks like you'll need a way to deploy after making changes or have your devtools workspace point to the server docroot.
The Charles Proxy "map local" feature was requested of the Chromium team in this issue and the team declined to pursue it.
I am working on HTML/CSS/JavaScript from within emacs. My workflow is currently
Make a change -> Alt-Tab to browser -> F5 (refresh) -> Alt Tab to emacs
Do any extensions exist that would auto-refresh the browser on a change? Or, possibly a better idea, when I hit a key combination from within emacs?
I've tried impatient-mode and it worked nicely for what I needed. It also can be extended to do things like, for example, display the contents of a buffer you are editing in an iframe alongside other buffers etc.
Option 1, refresh the browser on interval:
With the addition of a single meta tag into your html document, you can instruct the browser to automatically refresh at a designated interval number of seconds:
<meta http-equiv="refresh" content="3" />
Option 2, firefox plugin to refresh on document change:
A Firefox Add-on, called XRefresh, will monitor your project folder, and, every time it detects a change to the source files, it’ll reload Firefox.
Option 3, refresh the page from Emacs, vim or shell script:
There is a firefox plugin called IMACROS that let you define a script that will remote control firefox from a file on disk. You can create a remote control script, and then program Emacs, vim or shell script to tell firefox to run the remote control script when you are ready, thus refreshing the page. You would need to create a keyboard hook to kickoff the script on save.
I use Yeoman, which help you scaffold web apps, which uses Grunt and the command
$grunt server
It is a simple setup that enables "livereload". I then set up my localhost or rather IP:9000 which enables live reload of any device in my local network upon file save of all watched files (scss, js, coffee, html) etc. So you can see the site change upon save not only on your desktop, but your tablet, mobile devices, cross browser, smart tv etc..
It also runs compass, unit tests, uglifies & concatenates, does the dishes, walks the dog you name it. Then "$ grunt build" creates complete distributions to deploy.
It's worth a look, it's a bit of a setup, I had a few hurdles, but it's amazing what you get back.
I'm encountering an issue with some local web prototyping;
I've been working on a single page which access files on my C:/ by starting my Chrome with --allow-file-access-from-files.
This is great, I've got my first page working successfully and it loads in my .js,.css files etc as expected.
However, when I click the link to proceed to the next page, the HTML loads, but none of the styles, javascript (or even images) load.
I'm receiving 'Failed to load resource' errors in the console, despite the file:// url pointing to the correct location.
Is there any way around this issue?
In lieu of a solution, some advice: Set up a web server on your computer for testing. Developing in an environment that's similar to a "production" environment, as opposed to working around the quirks of local file access, will save you quite a bit of time in the long run.
There are a number of tools that will help you set up a development web server; XAMPP is a popular one.