I see a lot of questions about how to disable the browser cache in Google Chrome in order to see the changes on the server, but I have the opposite problem. It seems my browser is doing a hard reload every time I press f5. I want to see how the page looks with my javascript edits. How can I do that?
Pressing only F5 does not do a hard reload in Chrome. When you press F5, the local changes that you've made in CSS or JavaScript will be lost. They don't get stored in the cache. However, you should be able to see your JavaScript changes in devtools take effect if that JavaScript part has not yet been called (like document load event).
Related
I worked on media queries on my website today and all of a sudden my browser won't refresh the site but rather says "No internet. ERR_INTERNET_DISCONNECTED.
I am using Visual Studio Code with Live Server by Ritwick Dey.
Console warning says "DevTools failed to load source map: Could not load content for chrome-extension://cfhdojbkjhnklbpkdaibdccddilifddb/browser-polyfill.js.map: System error: net::ERR_FILE_NOT_FOUND"
"VM10:6745 crbug/1173575, non-JS module files deprecated."
1 Issue: "Audit usage of navigator.userAgent, navigator.appVersion, and navigator.platform"
The site is on my laptop and I'm just working on it offline. What the heck is going on here?
I tried removing the queries.css file to see if that would make a difference. It did not.
Any link on the site will take me to this NO INTERNET page if I am in the responsive dimensions part of DevTools. Also when there is any edit to the html or css in VSC it immediately results in this NO INTERNET page appearing and I have to shut down the port and Go Live again.
I also opened the practice website that we are building for the class and the same thing is happening with that one as well. I have checked my html and css files on validator.w3.org and they have all checked out.
I tried changing the settings in VSC to set the browser to Chrome and also tried in Edge with the same results.
I removed the extension from VSC and reinstalled. No results. Please help!
I had to go into the settings in Devtools and reset.
open Devtools
click the gear icon at right side
scroll to bottom of settings
click "restore defaults and reload"
This made a whole variety of strange problems go away in Devtools and now it works as it should.
When I use chrome to debug my angular project, I open files in the chrome sources by clicking Ctrl+P/O and entering part of the name. Problem is: when I reload, seems chrome keeps all the wrong files open... so if I debugged into another file (didn't close it! just lost focus) and then reload (like, after sources changed and compiled) chrome will close that file, and might even not remember it in the open recents dropdown... It's like someone sorted in reverse for some reason...
Is there a way to fix the wrong sorting order through settings or configuration somehow?
Am I the only one finding this not very smart/useful? Considering debugging in browser is a pain in the arse as it is, and unfortunately is the only/go-to option for debugging browser apps...
I'm using VSCode, Live Server plugin for HTML5 web development. When i make a change to my web page then save Live Server should refresh what i see within Firefox. It does refresh but it is always to the oldest cache of the web page when live server first started up. I must always tap CTRL-F5 to force a web page refresh within firefox. The moment i save again within VSCode, the browser display reverts right back to the oldest, first copy.
I've already tried enabling "Disable Cache" within the FF Dev Tools > Networking area. Didnt help. I've tried about.config | browser.cache.disk.enable set to false. Didnt help.
Just wondering if this is normal behavior or if the Live Server plugin (Ritwick Dey) for VSCode is broken.
At the present time
Ok it seemsthe problem was i was using a service worker (sw.js). The browser saw the file, autoloaded it and apparently took full control over caching in the browser -- basically, no matter what i did caching and refreshing was meaningless. I really need to understand this sw.js thing.
I'm having an annoying issue with vscode live server. Every single time I hit ctrl+save or even when the files autosaves itself, vscode scroll the page up to the top of it. Sometimes when the page it's big, it just scrolls up to some random point on the page. It happens with every single page I code on Vscode using live server extension.
I tried to reinstall vscode and live server extension. I also found out that some people fixed this ticking "Settings:Full Reload" box. But also didn't work for me.
I just want that when I save the file the browser keeps the same position on the screen. I think code withou a live server feature is really wierd, but this issue is driving me crazy!!!
For me it works "Settings:Full Reload" but remember you have to close server before do that change
I was profiling bbc page and I noticed some jankiness. I got to the culprit JavaScript file and it had an observer on scroll. I made the changes. However when I reload the page all my changes are gone.
I could have used workspaces but since I do not have bbc code I can't use it.
My question is after making local changes to the file how do I tell chrome devtool to use this changed file and then reload the page so that I could do performance profiling again.
This feature is in development as a Local Overrides experiment. However, it is not yet stable (some testers reporting it simply crashes the browser) so using the experiment as it is now is not recommended. As it is, in Stable Chrome DevTools there is no functionality for this built in.