I have a little problem I'm working on a react app using the localhost:3000 to see the differences. But for some of the changes like the favicon, it didn't update until I clear the cache for this url in firefox. So my question is there is a way to stop firefox from saving the cache for this specific url without disabling it completely for every website?
You can disable cache temporarily by opening developer tools, press F1 to open dev tool settings, scroll down and enable Disable HTTP Cache (when toolbox is open), however this will only take effect when dev tools is open
Related
This makes the workflow a lot harder. Is there a way to use react dev tools?
I also notice constantly that the extension dev tools take some time to load, like 1 to 2s, and because of that, it misses network requests... is there a way to speed it up? I mean, speed up the development workflow, maybe some way to let the extension use more memory? the first few requests do not show in the network tab, but they are sent to the server.
I'm talking about the dev tools that open when you click on the (service worker) link in the chrome://extensions/ tab or when you open the **
** and do right click > inspect
The standalone version of React Devtools works https://github.com/facebook/react/tree/main/packages/react-devtools
Since you can't load the script from localhost you will have to include it in your extension.
To do that, go to http://localhost:8097 (or wherever your react devtools is running), save the JS to a file in your Chrome extension folder and add that with a script tag to your html.
Be sure to remove it before publishing.
I also notice constantly that the extension dev tools take some time to load, like 1 to 2s, and because of that, it misses network requests... is there a way to speed it up?
You can try to use the Incognito Mode. There will be no extensions used. So, it will not affect your network requests.
I made a PWA (progressive web app) a few weeks ago with React and some PWA configuration. From that moment, the name I gave the app still displays in the top bar when I try to run any other app on localhost:3000.
Apart from this, there were no issues with running applications on localhost:3000 for a long time, so it didn't bother me. But since last week, when I tried starting my React app (yarn start) on port 3000, my app won't render anymore.
I figured it might have something to do with the browser's cache settings, so I tried opening the app in another browser and it suddenly worked.
Notice that the name has now changed back to "React App" instead of the PWA name. Since it worked on the other browser I started testing some routes and tried to delete my cache in the browsers I normally use.
I tried adding something to the route (for example: localhost:3000/test) and this also redirected me to the right page (from the right application).
Is my PWA running somewhere in the background and causing issues or is there some browser configuration I am not setting right?
It is probably cache, it's not possible to run two apps under same port at the same time (at least by default).
You should have set that cache shouldn't work on dev environment to prevent that happening.
You can try incognito or open dev tools in Chrome => right click on refresh icon and select "Empty cache and hard reload".
Also try unregistering service worker in your app or in browser dev tools.
A way good way to resolve this error is -
Right-click and press inspect element to open the dev tools.
Under the dev tools, head on to the "Application" tab.
Here, on the left side, you'll find an option "Service Worker".
Click on it, and from the left side, press unregister.
After this, you can press "Empty Cache & Hard Reload" and your application would work just fine.
Empty cache and hard reload
you should press Ctrl + F5 together
I open a React page in Google chrome but does not open, still loading and Browser show Aw, snap! Can you suggest me What going Wrong.
Image
The Aww Snap crush is a bug in chromium caused by different things:
Low memory
It is also possible that site contains lots of images or JavaScript which might force Chrome to run out of space on the device while loading the site.
I'd suggest you clear up some space on the device and reboot the device.
If it helps, try closing any unused application in background to save resources (CPU, RAM and disk space) and see if Chrome continues to crash.
This vulnerability crashes browser tabs when encountering a link with a malformed URL in the HTML of a page.
The bug crashes the browser without the user taking any direct action other than loading the affected page.
This vulnerability occurs because of Chrome's habit of prefetching page data, such as performing DNS lookups on domain names in links on a page, in a preemptive attempt to speed up future loads. Chrome will try and work out which link on a site you're likely to click on next and then pre-load in the background.
Possible fix is disabling pre-fetching
Go to Settings >> Privacy >> Use a prediction service to load pages more quickly >> Uncheck box.
Another possible cause is a corrupt profile.
You can create a new profile, but if you do, custom data won't be available by default. This includes bookmarks, extensions and settings that you may have changed in Chrome.
I'm working on an ASP.NET Core/Angular project. I don't understand why browsers are not pulling the last version of my JavaScript. Yet when I look at the output folder (wwwwroot/ClientApp/app), all the JavaScript files and their corresponding map files are up to date.
I've pressed Ctrl + Refresh to force browsers to request newer version, but nothing is happening. They still have the older versions. Same is true with the HTML.
The MVC part works just fine, i.e. any change is being reflected by the browser.
What else can be done to push browsers to refresh the pages?
This is a common issue with HTML files especially -
While in development, you can set the browser to disable the cache when dev tools are open
1 - Right Click Inspect element OR Ctrl + Shift + I
2 - Go to settings
3 - Disable the cache when Dev Tools is open
you could also see if the checkbox is checked under network tab Also you can disable the cache under Network tab to force a refresh
after disabling the cache keep Dev tools open and refresh the page
remove your browser cookies and cache, or try this:
use another browser
change app url or port so the browser will retrieve a fresh resources
Each time i do changes in my Angular template (html file) i need to clear my browser cache and refresh the browser so the changes can be applied. Is there a way to avoid that ?
I'm using Chrome and Firefox.
Thanks
If you have the developer tools console open, then press F1 and select 'Disable Cache (while devtools is open)' (for chrome)