While developing an Angular 2 application, I use Google Chrome for debugging etc..
Problem is - any change I make, both in the .js files (.ts file) and in the HTML template files I use - is not visible, until I clear the browser's cache manually.
I've tried loading without cache (CTRL + F5), and changing the browser's setting to load new resources on every visit of my site, but this does not help.
When changing my index.html file, for instance, the problem doesn't occur.
Any suggestions ?
In the developer tools > settings > network, there is an option "Disable cache (while DevTools is open)".
Enable that setting and leave the developer tools open while debugging.
Related
How can I get chrome to auto-reload generated css?
I've seen lots of sites advising me to check the "Auto-reload generated CSS" checkbox in dev tools settings, eg Chrome's "Auto-Reload Generated CSS" not reloading page when SASS recompiles CSS.
But I do not see that option there, my options page has the option to enable CSS source maps, but there is no option for "Auto-reload generated CSS"
(Unfortunately, my work internet proxy prevents upload of images, so i can't upload an image)
Has this option been removed from chrome dev tools? Or is there some hidden config setting I need to change?
I'm using chrome version 53.0.2785.116 m (64-bit) on Windows 7 SP1.
Thanks in advance for any help.
See https://crbug.com/642802:
When you add a folder to the workspace and establish mapping, this happens automatically now.
See Set Up Persistence with DevTools Workspaces:
In case you've already mapped your local folder to your workspace, but the browser is still serving the network folder contents to automatically stage persistent changes in the browser, map local files in the folder to a URL:
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 to disable cache on chrome for Android?
I change my page content, and refresh the page, but the content still is old.
I have set the nginx config like below, but it has no effect.
#disable cache
add_header Cache-Control "no-cache, no-store, must-revalidate";
add_header Pragma no-cache;
add_header Expires 0;
Is there a way to get my newest page without manually clear cache again and again?
This may not be the easiest way, but it will 100% work and should be part of your development setup anyway.
Using Google Chromes web tools on Windows or Mac will allow you to do "remote debugging".
Enable remote debugging on Android device through Developer Menu in settings.
Connect phone to PC using USB
Open Google Chrome and access the developer console (F12)
Click on the three dots (top right) > more tools > Remote devices.
Scroll down to select your mobile device, at this stage you should see all chrome instances open on your phone. Select the instance you wish to "force reload and disable cache" by pressing Inspect
Another screen should appear allowing you to access the network tab and select "Disable Cache"
Currently there is no way to disable cache on chrome for Android but it is possible to clear the cache.
UPDATE: As of now there is a way to disable cache with requires your phone to be connected and needs remote debugging, please refer to Dean Meehan's answer for more info
Follow these steps to clear the cache.
http://www.refreshyourcache.com/en/chrome-android/
Click on the menu button (three dots in the topright corner).
Click on Settings in the menu.
Click on Privacy in the menu.
Click on Clear browsing data... at the bottom.
Select Empty the cache from the list.
Confirm clear browsing data.
I know the question is asking about disabling cache on chrome for Android, but this may help people looking for a solution to mobile development.
To see changes on your website with your Android device use the New incognito tab in chrome web menu.
Click top right drop down menu in chrome browser
Click "New incognito tab"
Navigate to your website and see all your most recent changes.
IMPORTANT: To see new changes after viewing with incognito, you must close the incognito mode completely and reopen due to the current tab also caching.
To disable the cache first you'll have to disable scripts / css caching on the ones you are editing.
In order to do that, add a timestamp to your file inclusions :
<link rel='stylesheet' href='/static/css/main.css?t={{ts}}'/>
<script type='text/javascript' src='/static/scripts/main.js?t={{ts}}'></script>
{{ts}} being a timestamp (I'm using jinja templating).
Then if you edit your html page, you could change the request adding a random parameter to it as such :
test 1 :
mywebsite.com/this_page
test 2 :
mywebsite.com/this_page/?i=1
test 3 :
mywebsite.com/this_page/?i=2
...
It's more a hack than a real solution, but chrome kindly ignores the cache-control meta, so there aren't lots of clean way to do it.
The following bash script will rename
<script src="path/to/app.js"></script>
to
<script src="path/to/app.js?t=18:15:45></script>
in an index.html file, which will prevent mobile caching.
#!/bin/bash
time=$(date +"%T")
sed -i "s/app.js/app.js?t=${time}/" ./path/to/index.html
Download this app : App Cache Cleaner
Open the app
Go to the app settings via the '3 dotted' button
screenshot
Tick mark the option to show widgets and the rest is upto you
You may as well disable Chrome's Data Compression policy and preloading of pages.
As of now, there are no 'disable cache' option in chrome
screenshot2
PS:i cud not show pictures because of my low rep, help me increase that too ;p
I have a test.html which uses multiple stylesheets. When opened the file from the local drive (not going through webserver), the styles were applied differently when compared to loading the files from webserver. Can this happen?. How to control this from happening?
attached is the comparision image from chrome browser developer tools styles listing.
As it was mentioned in comments, this looks like a browser caching issue.
A web cache stores copies of documents passing through it; subsequent requests may be satisfied from the cache if certain conditions are met.
http://en.wikipedia.org/wiki/Web_cache
Try hitting F5 to refresh the page or disable cache. Usually, it is done through the Developer Tools in a browser (F12).
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